同步加载Google跟踪代码管理器 [英] Load Google Tag Manager Synchronously

问题描述

我已经搜索了Google跟踪代码管理器(GTM)文档，但没有找到任何解决此问题的方法.我正在与一个联盟网络合作，该联盟网络希望同步加载其跟踪像素，以确保其在页面内容加载之前触发.这仅适用于我们的订单确认页面.我们已经实施了GTM，因此我们可以在5分钟(而不是2周)内启动和修复代码.

I have searched Google Tag Manager (GTM) documentation and did not find anything addressing this issue. I'm working with an affiliate network who wants their tracking pixel to be loaded synchronously to ensure that it fires before the content of the page loads. This only applies to our order confirmation page. We've implemented GTM so we can launch and fix tags in 5 minutes versus 2 weeks.

GTM安装在我们的订单确认页面的顶部，并且异步加载标签，因此我知道联盟网络的标签加载非常快，但是网络仍然担心某些数据可能会丢失. GTM没有任何选项或文档表明可以同步加载脚本，但是我注意到在其代码中j.async = true名称-值对.

GTM is installed at the top of our order confirmation page and loads tags asynchronously so I know that the affiliate networks' tags are loading very quickly but the networks are still concerned that some data may be lost. GTM doesn't have any options or documentation that would indicate that it is possible to load the script synchronously but I notice the j.async=true name-value pair in their code.

如果我将代码的那一部分更改为j.async = false，代码将同步加载还是将其破坏?

If I change that part of the code to j.async=false, will the code load synchronously or will I just break it?

这是完整的代码供参考.

Here's the full code for reference.

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

推荐答案

The article on Cardinal Path is great for learning how to setup synchronous tags.

但是，关于确保没有丢失数据的担忧，我想在文章底部强调Mickael的评论.由于dataLayer.push可能不会在gtm.dom事件发生之前完成，因此您应该在dataLayer.push中包括一个自定义事件，这样您就不必依赖gtm.dom来触发您的代码.

However, as for the concern about ensuring there is no lost data, I would like to highlight Mickael's comment at the bottom of that article. Since the dataLayer.push might not be complete before the gtm.dom event occurs, you should include a custom event in the dataLayer.push so you are not relying on gtm.dom to fire your tags.

这是一个示例代码，其中包含针对页面加载的自定义事件.

Here is an example tag with a custom event specific to page load.

标记名称:pageLoad

Tag Name: pageLoad

标记类型:自定义HTML标记

Tag Type: Custom HTML Tag

HTML:

<script type="text/javascript">
var tid = setInterval( function () {
    if ( document.readyState !== 'complete' ) return;
    clearInterval( tid );       
    dataLayer.push({ "event": "pageLoaded" });
}, 100 );
</script>

添加以下触发规则.

规则名称:所有页面

条件:{{url}}与RegEx匹配.*

Condition: {{url}} matches RegEx .*

然后，在您要触发的会员标签上，您需要做的就是将此自定义事件(即pageLoaded)作为触发规则的条件.在此示例中，条件为:{{event}}等于pageLoaded

Then, on the affiliate tags you want fired, all you have to do is include this custom event (i.e. pageLoaded) as a condition on the firing rule. In this example, the condition would be: {{event}} equals pageLoaded

这篇关于同步加载Google跟踪代码管理器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！