将gtm id动态传递到head部分中的gtm脚本

Question

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

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

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。