如何在React特定路由组件中加载并执行Google Analytics脚本？

直接用模板字符串插入DOM的脚本不会被浏览器执行，因为这种方式只是把文本插入节点，不会触发浏览器的脚本解析逻辑。下面是针对你的代码的具体实现方式，用React的useEffect钩子在组件挂载（即进入特定路由时）动态加载并执行这些代码：

1. 单独加载GTM代码 #

在目标路由对应的组件中添加以下代码：

import { useEffect } from 'react';

const TargetRouteComponent = () => {
  useEffect(() => {
    // 直接执行GTM的自执行函数逻辑
    (function (w, d, s, l, i) {
      w[l] = w[l] || [];
      w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
      var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l != "dataLayer" ? "&l=" + l : "";
      j.async = true;
      j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
      // 检查脚本是否已存在，避免重复加载
      if (!d.querySelector(`script[src="${j.src}"]`)) {
        f.parentNode.insertBefore(j, f);
      }
    })(window, document, "script", "dataLayer", "GTM-XXXXXX");

    // 组件卸载时清理（可选，按需保留）
    return () => {
      const gtmScript = document.querySelector(`script[src*="gtm.js?id=GTM-XXXXXX"]`);
      if (gtmScript) {
        gtmScript.remove();
      }
      // 可选：清空dataLayer，根据业务需求决定
      // window.dataLayer = [];
    };
  }, []); // 空依赖数组确保仅在组件挂载时执行一次

  return <div>你的路由页面内容</div>;
};

export default TargetRouteComponent;

2. 单独加载Google Ads gtag代码 #

同样在useEffect中处理，先加载gtag.js脚本，再执行初始化逻辑：

import { useEffect } from 'react';

const TargetRouteComponent = () => {
  useEffect(() => {
    const loadGtag = () => {
      const script = document.createElement('script');
      script.async = true;
      script.src = "https://www.googletagmanager.com/gtag/js?id=AW-XXXXXX";
      
      // 脚本加载完成后执行初始化
      script.onload = () => {
        window.dataLayer = window.dataLayer || [];
        function gtag() {
          dataLayer.push(arguments);
        }
        gtag("js", new Date());
        gtag("config", "AW-XXXXXX");
      };

      // 避免重复添加脚本
      if (!document.querySelector(`script[src="${script.src}"]`)) {
        document.body.appendChild(script);
      }
    };

    loadGtag();

    // 组件卸载清理（可选）
    return () => {
      const gtagScript = document.querySelector(`script[src*="gtag/js?id=AW-XXXXXX"]`);
      if (gtagScript) {
        gtagScript.remove();
      }
      // 可选：清理gtag相关变量
      // delete window.gtag;
      // window.dataLayer = [];
    };
  }, []);

  return <div>你的路由页面内容</div>;
};

export default TargetRouteComponent;

3. 合并加载两种代码 #

如果需要在同一路由同时加载GTM和Google Ads代码，将两个逻辑合并到同一个useEffect即可：

import { useEffect } from 'react';

const TargetRouteComponent = () => {
  useEffect(() => {
    // 加载GTM
    (function (w, d, s, l, i) {
      w[l] = w[l] || [];
      w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
      var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l != "dataLayer" ? "&l=" + l : "";
      j.async = true;
      j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
      if (!d.querySelector(`script[src="${j.src}"]`)) {
        f.parentNode.insertBefore(j, f);
      }
    })(window, document, "script", "dataLayer", "GTM-XXXXXX");

    // 加载Google Ads gtag
    const gtagScript = document.createElement('script');
    gtagScript.async = true;
    gtagScript.src = "https://www.googletagmanager.com/gtag/js?id=AW-XXXXXX";
    gtagScript.onload = () => {
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "AW-XXXXXX");
    };
    if (!document.querySelector(`script[src="${gtagScript.src}"]`)) {
      document.body.appendChild(gtagScript);
    }

    // 卸载时清理脚本
    return () => {
      const targetGtm = document.querySelector(`script[src*="gtm.js?id=GTM-XXXXXX"]`);
      if (targetGtm) targetGtm.remove();
      
      const targetGtag = document.querySelector(`script[src*="gtag/js?id=AW-XXXXXX"]`);
      if (targetGtag) targetGtag.remove();
    };
  }, []);

  return <div>你的路由页面内容</div>;
};

export default TargetRouteComponent;

关键说明 #

• 空依赖的useEffect确保代码仅在组件挂载（进入路由）时执行一次，避免重复加载脚本。
• 添加脚本存在性检查，防止路由切换时重复插入相同脚本。
• 组件卸载时的清理逻辑可选，若希望离开路由后彻底移除相关资源则保留，否则可删除。
• 这种动态创建script元素的方式，和直接在HTML中插入脚本的执行效果完全一致。

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