2

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

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

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

现在是困难的部分（至少对我来说），谷歌标签管理器需要在我们的 html 头部添加一个脚本标签，但是当时用户设置还没有从我们的 api 加载，所以我们不能提供谷歌的脚本使用正确的跟踪代码管理器代码（此格式：GTM-XXXXX）。

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

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

4

1 回答 1

2

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

它最终变得非常简单，我的 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负责其余的工作。

我希望这是有道理的。

于 2018-07-05T11:22:05.767 回答