如何在我的 Angular 4 应用程序中使用 angulartics2 (Adobe Analytics) 跟踪事件

Question

我正在尝试在我的 Angular 4 应用程序中跟踪我的页面浏览量，特别是使用 Adobe Analytics。

我正在使用 angulartics2。

首先，我在我的 index.html 页面中添加了必要的 adobe 暂存脚本

 <script src="//assets.adobedtm.com/ab4bae3236ee9df67d8ccdffde34299268b1c40b/satelliteLib-760b49f02b6b0eb2f709fccf152b67359e5ee4e1-staging.js"></script>

然后我在我的 NgModule 中启用提供程序。

import { Angulartics2Module, Angulartics2AdobeAnalytics } from 'angulartics2';

@NgModule({
 declarations: [
AppComponent
],
 imports: [

   Angulartics2Module.forRoot([Angulartics2AdobeAnalytics]),
 ],
 providers: [],
 bootstrap: [AppComponent]
   })
 export class AppModule { }

然后我在我的根组件中导入提供程序。

import { Angulartics2AdobeAnalytics } from 'angulartics2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 export class AppComponent implements OnInit {


 constructor(private angulartics2AdobeAnalytics:Angulartics2AdobeAnalytics){}

我试图在我的组件（例如仪表板）的代码中跟踪事件，但这些值没有通过。

import { Angulartics2 } from 'angulartics2';

 constructor(
    private angulartics2: Angulartics2
  ) {   
        this.angulartics2.eventTrack.next({
          properties: {
            "siteLanguage": "English",
            "pageCategory": "Landing dashboard",
            "pageSubSection1": "",
            "pageSubSection3": "",
            "domainName": "www.application.co.za",
            "pageSubSection2": "",
            "pageSubSection5": "",
            "pageSubSection4": "",
            "pageName": "Landing dashboard",
            "contentType": "Home"
          },
        });
  }

关于如何执行此操作以使其有效的任何建议？

虽然这不是解决方案，但将其明确添加到我的索引文件确实有效。

<script>
    var dataLayer = {
      "siteLanguage": "English",
            "pageCategory": "Landing dashboard",
            "pageSubSection1": "",
            "pageSubSection3": "",
            "domainName": "www.application.co.za",
            "pageSubSection2": "",
            "pageSubSection5": "",
            "pageSubSection4": "",
            "pageName": "Landing dashboard",
            "contentType": "Home"
       };
     </script>

亲切的问候

Answer 1

我知道一点 angular2，我非常了解 Adobe Analytics，但我对 angulartics 不熟悉，但我会看看我是否能提供帮助。任何时候 Adobe Analytics 实施不起作用时，至少会出现以下三种情况之一：

AppMeasurement 和 "s" 对象（通常保存在 "s_code.js" 文件中，或由 DTM 为完全 DTM 实施自动构建）未正确设置或未可访问。
s.pageName 之类的变量或 s.eVar1 之类的自定义变量未正确设置（尽管这不应该阻止变量被完全设置。
您不会在合适的时间。

我可以看到 Angulartics2AdobeAnalytics 如何完成 #2（它自动执行 pageName，您可以为自定义变量使用 setUserProperties）以及它如何完成 #3（pageTrack 和 eventTrack）。我不确定它希望您如何设置该对象或托管 s_code.

它看起来像 angulartics 旨在用于 而不是 DTM，而不是像你正在尝试的那样（angulartics 就像一个迷你标签管理系统本身）。我不认为 DTM 正在做任何有助于 Angulartics 的事情。我无法从 Angulartics2AdobeAnalytics 文档中弄清楚您应该将 s_code 放在哪里。 DTM 确实创建了一个 Adobe Analytics Library/s_code 文件（例如，您的文件保存在 http://assets.adobedtm.com/ab4bae3236ee9df67d8ccdffde34299268b1c40b/s-code-contents-d284ea5dda8dda4834d869c1d6edac2867ea95ac-staging.js), but it is scoped to only be accessible within DTM, so it wouldn't be helping in your current set up at all (see https://www.digitaldatatactics.com/index.php/2016/01/15/how-to-get-a-global-s-object-in-dtm/ 以了解如何让 DTM 创建一个可以在全球范围内使用的 s_code）。
您可能需要从解决方案中删除 DTM，然后弄清楚 Angulartics 希望如何设置 "s" 对象。也许您只需要放置一个 s_code 文件来代替您的 DTM 库（参见 https://marketing.adobe.com/resources/help/en_US/sc/implement/impl_js_file.html which IS referenced from https://github.com/angulartics/angulartics2/tree/master/src/lib/providers/adobeanalytics 这让我觉得他们打算让您使用它），那么您就不需要让 DTM 很好地播放Angular抽动。

如果您想走严格的 DTM（不是 Angulartics）路线，我已经在 Angular 应用程序中实现了它 - 它位于 https://github.com/jkunz/pocketSDR/tree/master/src 但请不要不要判断我的 angular 技能 - 这是一个学习项目:) 我将我的 DTM 库嵌入代码添加到我的 index.html （就像你一样），然后在整个过程中直接与 DTM 的 js 对象 (_satellite) 交互应用程序设置 DTM 数据元素（使用我的变量的值 - 请参见第 2 点）并触发 DTM 直接调用规则以在正确的时间触发信标（第 3 点）。如果我不关心设置自定义变量并且真的只是想在每次视图更改时将其保留在最低限度的页面视图跟踪中，我可以将 DTM 库放在我的 index.html 上，然后只需设置一个事件 -基于规则，寻找类似 locationchange 的东西（https://www.digitaldatatactics.com/index.php/2016/04/20/how-do-i-use-dtm-for-a-single-page-app/ 有相关信息）。

如何在我的 Angular 4 应用程序中使用 angulartics2 (Adobe Analytics) 跟踪事件

How to track events with angulartics2 (Adobe Analytics) in my Angular 4 application

analytics

adobe-analytics

event-tracking

angular