延迟加载GTM是个好主意吗 [英] Is it a good idea to lazy load GTM

问题描述

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

In an attempt to improve initial load time on a web app i am working on, I wanted to run the GTM scripts after my application is loaded.

1. 我想知道这是个好主意吗?
2. 如果我这样做，可能会有哪些副作用?

推荐答案

TL; dr

延迟加载GTM似乎很好.

it seems that it is fine to lazy load GTM.

长版

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

Generally I would run scripts in the way that the creator recommends to run it.

我假设您是因为GDPR而希望延迟加载GTM吗?

I assume you want to lazy load GTM because of GDPR?

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

they accept GDPR -> you load GTM. At least, for me that is the only reason to lazy load GTM and that is the reason I am on this very page.

如果您查看GTM的加载情况，您会发现他们已经有点懒惰地加载它了.详细地，他们异步加载了该​​文件.这意味着页面也会加载，而GTM也将加载.很显然，这会导致在加载GTM之前加载页面(如果页面很短)的效果.

If you look at the loading of GTM you can see they already kind of lazy load it. In detail, they load it async. That means the page loads while GTM loads as well. This can obviously lead to the effect that the page, if it is very short, loads before GTM is loaded.

查看推荐的包含GTM的方法:

See their recommended way to include 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应该没问题，因为它曾经曾经有点延迟加载.

so it should be fine to lazy load GTM as it already is used to be a bit lazy loaded.

我当时在想网页浏览"触发器/标签可能是个问题.但是看来，至少在我进行的几次测试中，情况并非如此.即使将GTM加载函数包装到 setTimeout(function(){}，5000); 中，网页浏览也会触发，但我仍然可以触发网页浏览量.

I was thinking maybe "page view" triggers / tags could be an issue. But it seems, that is not the case, at least in the few tests I ran. Pageview will fire even if you wrap the GTM loading function into a setTimeout(function(){}, 5000); I still get the page views fired.

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

as I was asked to provide an example code of lazy loading GTM I will add it below:

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

this makes use of jquery, so make sure jquery is loaded before this script exectues:

     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);

注意:我尚未对此进行测试.

notice: I haven't tested this.

这篇关于延迟加载GTM是个好主意吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！