如何将原生JS格式的Google Ads标签转换为React代码并集成？

下面是两种可行的集成方案，按需选择：

方案1：自定义广告组件（推荐） #

React是单页应用，动态加载广告脚本更灵活，不会阻塞页面渲染。可以封装成一个独立组件：

import { useEffect, useRef } from 'react';

const GoogleAd = () => {
  const adContainer = useRef(null);

  useEffect(() => {
    // 已经加载过广告脚本就不再重复执行
    if (window.google_ad_client) return;

    // 初始化广告参数
    window.google_ad_client = "ca-pub-3715562101512710";
    window.google_ad_slot = "JustBaat_Clapingo/Clapingo_728x90";
    window.google_ad_width = 728;
    window.google_ad_height = 90;

    // 创建并插入广告脚本
    const adScript = document.createElement('script');
    adScript.type = 'text/javascript';
    adScript.src = '//pagead2.googlesyndication.com/pagead/show_ads.js';
    adScript.async = true;
    
    adContainer.current?.appendChild(adScript);

    // 组件卸载时清理脚本
    return () => {
      adScript.parentNode?.removeChild(adScript);
    };
  }, []);

  return <div ref={adContainer}></div>;
};

export default GoogleAd;

使用方式：在需要展示广告的组件里导入并渲染<GoogleAd />即可。

方案2：全局嵌入到index.html #

如果你的广告需要在全站多个页面展示，可以直接把广告代码放到public/index.html中：

<!-- 放到public/index.html的<head>或者<body>底部 -->
<script type="text/javascript">
google_ad_client = "ca-pub-3715562101512710";
google_ad_slot = "JustBaat_Clapingo/Clapingo_728x90";
google_ad_width = 728;
google_ad_height = 90;
</script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

然后在React组件中添加广告容器：

// 任意需要展示广告的组件中
const AdPlaceholder = () => {
  return <div></div>;
};

注意：这种方式在路由切换后，广告可能不会自动重新加载，需要额外处理刷新逻辑。

关键注意事项 #

• 广告容器的实际尺寸要和google_ad_width、google_ad_height一致，否则广告可能显示错位。
• 动态加载时的重复判断很重要，避免多次插入脚本导致冲突。
• 严格遵守Google Ads的投放政策，不要违规展示广告。

内容的提问来源于stack exchange，提问作者Vaibhaw kr