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

Question

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

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

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

现在最困难的部分来了（至少对我来说），谷歌标签管理器需要在我们的 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 会负责其余的工作。

我希望这是有道理的。