Question

我正在开发一个Angular（1.6.8）应用，我们已将Angulartics库与Google Analytics和Google Tag Manager扩展结合使用。当我按照提供的说明进行操作时，这一切都很有效。

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

这些用户可以在不同的Angular应用中管理他们的设置，在第二个应用中，他们为我们提供了Tag Manager标记及其Google Analytics代码。

现在是困难的部分（至少对我而言），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跟踪代码管理器和Google Analytics，以及动态代码

1 个答案: