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

我知道一点角度2，我非常了解Adobe Analytics，但我不熟悉angulartics，但我会看看我是否能提供帮助。任何时候adobe分析实施都不起作用，它将至少是三件事之一：

AppMeasurement和＆＃34; s＆＃34;对象（通常保存在＆＃34; s_code.js＆＃34;文件中，或由DTM自动构建，用于完全DTM实现）无法正确设置或无法访问。
s.pageName之类的变量或s.eVar1之类的自定义变量未正确设置（尽管这不应该阻止变量完全设置。
您不是在正确的时间触发st（跟踪页面视图）或s.tl（对于您要跟踪的内容，与特定的页面视图相关联）。

我可以看到Angulartics2AdobeAnalytics如何完成＃2（它会自动执行pageName，你会使用setUserProperties作为自定义变量）以及它如何完成＃3（pageTrack和eventTrack）。我不确定它是如何设置该主题或托管s_code的。

看起来似乎是使用而不是 DTM，而不是像你一样尝试使用angulartics（angulartics就像一个迷你标签管理系统本身）。我不认为DTM正在做任何有助于Angulartics的事情。我从Angulartics2AdobeAnalytics文档中可以得出的是你应该放置s_code的地方。 DTM会创建一个Adobe Analytics Library / s_code文件（例如，您的文件保存在http://assets.adobedtm.com/ab4bae3236ee9df67d8ccdffde34299268b1c40b/s-code-contents-d284ea5dda8dda4834d869c1d6edac2867ea95ac-staging.js），但它的范围只能在DTM中访问，因此它无法帮助您完成当前的设置完全（参见https://www.digitaldatatactics.com/index.php/2016/01/15/how-to-get-a-global-s-object-in-dtm/了解如何让DTM创建一个可以全局使用的s_code）您可能需要从解决方案中删除DTM，并弄清楚Angulartics是如何想要的那样＆＃34; s＆＃34;对象的东西设置。也许你只需要用一个s_code文件代替你的DTM库（参见https://marketing.adobe.com/resources/help/en_US/sc/implement/impl_js_file.html从https://github.com/angulartics/angulartics2/tree/master/src/lib/providers/adobeanalytics引用哪个让我认为他们打算你使用它），那你就不会了需要让DTM与Angulartics很好地合作。

如果你想要严格的DTM（不是Angulartics）路线，我已经在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）跟踪事件

1 个答案: