google-tag-manager - Google 跟踪代码管理器 - 使 id 动态化

Question

我需要在我的应用程序中实现谷歌标签管理器。它是一个具有独立配置系统的 Multi-Tenancy 应用程序。

我已经设置了谷歌标签管理器和分析。我在正文页面下方添加了以下代码片段:-

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

但是我需要根据加载的站点动态指定 id('GTM-XXXX')。有没有办法在运行时/动态地在上面的代码片段中提及 id？我需要替换/更改 iframe 和脚本中的 ID。

另请注意，它是一个 angularJS 前端

Answer 1

iframe 和脚本是互斥的；一种会在用户启用 Javascript 时发生(基本上一直如此)，而另一种情况会在用户未启用时发生(在这种情况下，Google 跟踪代码管理器会尽力而为，但可能无法很好地跟踪所有情况。您可以构建单独的每个的解决方案。

您只需要编写一个小函数，根据一些可识别的变量，决定部署哪个 GTM 代码，并分别替换该代码段或 iframe src。