Question

我在我的react js应用程序中集成了google标记管理器，但问题是我必须动态传递gtm脚本中存在的gtm id，并根据来自API的值的响应动态地打开和关闭datalyer。

我创建了一个组件LoadAppKeys，该组件接收一个值，在该值上我决定是否启用gtm。但是如何动态地将gtm id传递给index.html的head部分中存在的脚本，并将脚本附加到head中（如果value为1而不是0）。

class LoadAppKeys extends React.PureComponent {

  componentDidMount() {
    this.props.getStorefrontConfigs();
  }

  componentWillReceiveProps(nextProps) {
      if (!nextProps.loading) {
       const gtm = getGTM(nextProps.storefrontConfig);
         if (R.equals(gtm.gtm_enabled, 1)) {
            var script = document.createElement('script');
               script.type = "text/javascript";
               script.text = myGTM(window, document, 'script', 'dataLayer', "GTM-KQZGSBW");
            document.head.appendChild(script);
         }
   }
  }

-------------------------------------

    function myGTM(w, d, s, l, i) {
        (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; f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', gtm_id);
      }

要根据loadAppKeys组件中的值在每次页面加载脚本。

Answer 1

您可以直接调用myGTM，而不必进行整个脚本插入。否则，如果要插入，则只需确定src属性，例如：

script src = 'https://www.googletagmanager.com/gtm.js?id='+id

在这里您没有提到如何获取ID，但基本上是使用变量来更改ID。

动态将gtm id传递到头部的gtm脚本

1 个答案: