google-tag-manager - 延迟加载 GTM 是个好主意吗

Question

为了尝试缩短我正在开发的 Web 应用程序的初始加载时间，我想在我的应用程序加载后运行 GTM 脚本。

1. 我想知道这是不是个好主意？
2. 如果我这样做，可能的副作用是什么？

Answer 1

TL;dr

看来懒加载GTM是可以的。

长版

通常我会按照创建者建议的方式运行脚本。

我假设您是因为 GDPR 而想延迟加载 GTM？

他们接受 GDPR -> 你加载 GTM。至少，对我来说，这是延迟加载 GTM 的唯一原因，也是我在这个页面上的原因。

如果您查看 GTM 的加载，您会发现它们已经有点延迟加载了。详细地说，他们加载它异步。这意味着页面在加载 GTM 时也会加载。如果页面很短，这显然会导致页面在加载 GTM 之前加载。

查看他们推荐的包含 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;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MYID');

注意 j.async=true

所以延迟加载 GTM 应该没问题，因为它已经习惯了有点延迟加载。

我在想“页面浏览”触发器/标签可能是个问题。但似乎并非如此，至少在我运行的几次测试中是这样。即使将 GTM 加载函数包装到 setTimeout(function(){}, 5000); 中，Pageview 也会触发我仍然会触发页面浏览量。

因为我被要求提供延迟加载 GTM 的示例代码，我将在下面添加它:

这使用了 jquery，因此请确保在执行此脚本之前加载 jquery:

     function loadGTM(){

var my_GTM_id = 'GTM-ASDASDAS'; // BE SURE TO UPDATE THIS TO MATCH UR ID
//you can add checks here to see if GDPR got accepted if you want...
(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', my_GTM_id);
    }
    $( document ).ready(loadGTM);

注意:我还没有测试过这个。