Question

通常的GTM代码如下：

<!-- Google Tag Manager -->
<script>(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','myNewName','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

如果格式可读，则看起来像这样：

<script>
(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', 'myNewName', 'GTM-XXXX');
</script>

所以这个函数是一个匿名函数，将自动执行，对吗？我如何在原始javascript构造中使用此代码。因此，例如，仅当另一个变量为true时，才应执行此代码。

if (var === true) {
execute gtm inclusion and run the code...
}

谢谢！

Answer 1

您可以为script标签赋予无效 type属性，以告诉浏览器跳过其解析/执行。然后使用JavaScript纠正该属性并提示浏览器执行该属性；为了简单起见，我故意不处理连续的错误。

function enabler() {
  let sc = document.querySelector("script[type='foobar']");
  sc.removeAttribute("type");
  // remounting 
  sc.parentElement.appendChild(sc);
  sc.remove();
}

<button onclick="enabler()">enable script</button>
<script type="foobar">
  console.log("Now I am executing")
</script>

Answer 2

1]正如@ imvian2和@Dragonsnap上面提到的，您还可以这样包装语句：

if (runCode) {
  (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','myNewName','GTM-XXXX');
}

2]另一种可行的方法是将gtag代码放入其自己的js文件中。然后，您可以使用javascript加载它。

警告：google / gtag很有可能希望将其代码直接放置在页面中而不以这种方式加载，从而可以检测到所有页面加载事件。您将需要意识到这一点并进行测试，测试，测试。

建议：我将使用后端代码而不是使用js。

function addScript(scripts) {
    // IE9
    if (!Array.isArray(scripts)) scripts = [scripts];
    for(var i=0, n=scripts.length; i < n; i++) {
        var scriptElem = document.createElement('script');
        scriptElem.async = false; // load scripts in order
        scriptElem.src = scripts[i];
        // IE9
        var headElem = document.head || document.getElementsByTagName('head')[0];
        headElem.appendChild(scriptElem);
    }
}

var loadGtag = true;
if (loadGtag) {
    addScript('/path/to/my/gtag-script.js');
}

Answer 3

const GTM = ((w=window, d=document, s="script", l='myNewName', i='GTM-XXXX') => {
  w[l] = w[l] || []; //.... etc.....
  console.log(i); // Just to test
});


if (/*something is*/ true) GTM();

是否热衷于将自调用<script>转换为本地JS代码？

3 个答案: