延迟加载 GTM 是个好主意吗

Question

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

1. 我想知道这是否是一个好主意？
2. 如果我这样做，可能会产生什么副作用？

Answer 1

TL;博士

看来懒加载GTM也可以。

长版

一般来说，我会按照创建者建议的方式运行脚本。

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

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

如果您查看 GTM 的加载，您会发现它们已经有点延迟加载了。详细来说，他们加载它async。这意味着页面会在 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 加载函数包装到 a 中，页面视图也会触发，setTimeout(function(){}, 5000);我仍然会触发页面视图。

由于我被要求提供延迟加载 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);

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

Answer 2

1. 这是一个观点问题，所以可能偏离主题
2. 如果用户在您的应用程序完全加载之前中止，您将无法跟踪他们。这是否真的很糟糕取决于您的具体情况；至少您应该验证加载应用程序不会花费太长时间（因为您无法使用跟踪标签捕获中止的加载）。

因此，这是稍快的页面加载和潜在的数据丢失之间的权衡。理想情况下，您会进行 A/B 测试，看看当您将事件推迟到页面加载时，您的相关 KPI 是否真正得到改善，如果没有，那么无论如何，这个问题都是没有意义的。