使用 Angulartics、Google 标签管理器和分析，以及动态代码

Question

我正在开发一个 Angular (1.6.8) 应用程序，我们在其中实现了 Angulartics library in combination with Google Analytics and Google Tag Manager 扩展。当我按照提供的说明进行操作时，一切都运行良好。

但我们的情况似乎有点特殊，我们正在构建的应用程序将由多人使用，并且根据谁在访问我们从 api 中获取用户设置（使用 url 参数可以知道当时谁在访问）。

这些用户可以在另一个 Angular 应用程序中管理他们的设置，正是在第二个应用程序中，他们向我们提供了他们的跟踪代码管理器代码和他们的分析代码。

现在是困难的部分（至少对我而言），Google 标签管理器需要我们 html 头部的脚本标签，但那时用户设置尚未加载来自我们的 api，因此我们无法为 Google 的脚本提供正确的跟踪代码管理器标签（此格式：GTM-XXXXX）。

有谁知道在我们动态加载跟踪代码时正确加载这些脚本的方法吗？或者这是不可能的？

感谢任何能提供一些见解的人。

Answer 1

好吧，已经有一段时间了，我已经想出了一个解决方案来完成这项工作（不久前），我将展示我是如何到达那里的，以防其他人偶然发现我的问题。

结果很简单，我的 html

中有以下内容

<!-- Google Tag Manager -->
<script ng-bind-html="googleTagManagerScript"></script>
<!-- End Google Tag Manager -->

然后在我的 app.js 中，我通过 ajax 调用获取设置，当我得到结果时，我执行以下操作

$rootScope.pixels.tagmanager = value; // store the retrieved Tag Manager code in a variable
$rootScope.googleTagManagerScript = $sce.trustAsHtml("(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','"+$rootScope.pixels.tagmanager.code+"');");
$rootScope.googleTagManagerNoScript = $sce.trustAsHtml("<iframe src='https://www.googletagmanager.com/ns.html?id="+$rootScope.pixels.tagmanager.code+"' height='0' width='0' style='display:none;visibility:hidden'></iframe>");

所以基本上我会在一切可用时将整个 Google 脚本放在一个变量中，然后 ng-bind-html 负责其余的事情。

我希望这是有道理的。

使用 Angulartics、Google 标签管理器和分析，以及动态代码

Using Angulartics, Google Tag Manager and Analytics, with dynamic codes

angularjs

google-analytics

google-tag-manager

angulartics