如何使用angulartics2 ( Analytics)跟踪我的Range4应用程序中的事件

Question

我正在我的角4应用程序中跟踪我的页面视图，特别是使用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，我也很了解Analytics，但我不熟悉角度分析，但我会看看是否能有所帮助。当adobe分析实现不起作用时，它至少是三件事中的一件：

1. AppMeasurement和"s“对象(通常保存在"s_code.js”文件中，或者由DTM为完全DTM-实现自动生成)没有正确设置，或者无法访问。
2. 像s.pageName这样的变量或者像s.eVar1这样的自定义变量没有得到正确的设置(尽管这不应该完全阻止变量的设置)。
3. 您没有在正确的时间触发s.t (跟踪页面视图)或s.tl (对于您想要跟踪的不应该与特定页面视图相关联的内容)。

我可以看到Angulartics2AdobeAnalytics如何完成#2 (它自动完成pageName，您将使用setUserProperties作为自定义变量)以及它如何完成#3 (pageTrack和eventTrack)。我不知道它希望您如何设置该对象或托管一个s_code。

它看起来确实是用来代替DTM的角度，而不是像你正在尝试的那样(天使就像一个迷你标签管理系统本身)。我不认为DTM会做任何能帮助天使的事情。我从Angulartics2AdobeAnalytics文档中找不到的是您应该将s_code放在哪里。DTM确实创建了Analytics / s_code文件(例如，您的文件保存在http://assets.adobedtm.com/ab4bae3236ee9df67d8ccdffde34299268b1c40b/s-code-contents-d284ea5dda8dda4834d869c1d6edac2867ea95ac-staging.js中)，但是它的作用域仅限于DTM内部，因此它对您当前的设置毫无帮助(有关如何让DTM创建可在全球范围内使用的s_code，请参见https://www.digitaldatatactics.com/index.php/2016/01/15/how-to-get-a-global-s-object-in-dtm/ )。

您可能需要从解决方案中删除DTM，只需了解Angulartics希望如何设置"s“对象。也许你只需要用一个s_code文件来代替你的DTM库(参见file.html，它是从https://github.com/angulartics/angulartics2/tree/master/src/lib/providers/adobeanalytics引用的，它让我觉得他们想让您使用它)，那么您就不需要让DTM很好地使用Angulartics了。

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