Search code examples
angularanalyticsadobe-analyticsevent-tracking

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

I am trying to track my page views in my Angular 4 application, specifically using Adobe Analytics.

I am using angulartics2.

To start I added the necessary adobe staging script in my index.html page

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

I then enable the providers in my NgModule.

import { Angulartics2Module, Angulartics2AdobeAnalytics } from 'angulartics2';

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

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

I then import the provider in my root component.

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){}

I attempt to track events in the code of my component (dashboard for example) but the values are not pulling through.

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"
          },
        });
  }

Any suggestions perhaps on how to do this so that it works?

Explicitly adding this to my index file does work though this is not a solution.

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

Kind regards

Solution

  • I know a little angular2, and I know Adobe Analytics very well, but I'm not familiar with angulartics, but I'll see if I can be helpful. Any time an adobe analytics implementation isn't working, it's going to be at least one of three things:

    1. AppMeasurement and the "s" object (typically held in an "s_code.js" file, or built automatically by DTM for a fully-DTM-implementation) aren't set up correctly, or aren't accessible.
    2. Variables like s.pageName or custom variables like s.eVar1 aren't getting set correctly (though this shouldn't stop a variable from being set altogether.
    3. You aren't firing s.t (to track a page view) or s.tl (for things you want to track that shoudn't be associated with a specific page view) at the right time.

    I can see how Angulartics2AdobeAnalytics accomplishes #2 (it does pageName automatically, and you would use setUserProperties for custom variables) and how it accomplishes #3 (pageTrack and eventTrack). I'm not sure how it wants you to set up that s oject or host an s_code.

    It does look like angulartics is intended to be used instead of DTM, not alongside it like you are trying (angulartics is like a mini tag management system itself). I don't imagine DTM is doing anything that would help Angulartics. What I can't figure out from the Angulartics2AdobeAnalytics documentation is where you SHOULD be putting your s_code. DTM does create an Adobe Analytics Library/s_code file (for instance, yours is kept at 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/ for how to get DTM to create an s_code that can be used globally).
    It might be you need to remove DTM from your solution and just figure out how Angulartics wants that "s" object stuff set up. Maybe you just need to put an s_code file in place of your DTM library (see 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 which makes me think they intend you to use it), then you wouldn't need to get DTM to play nicely with Angulartics.

    If you want to go the strictly-DTM (not Angulartics) route, I have gotten that working in an Angular app- it's at https://github.com/jkunz/pocketSDR/tree/master/src but please don't judge my angular skills- this was a learning project:) I added my DTM library embed code to my index.html (just like you have), then interacted directly with DTM's js object (_satellite) throughout the app to set DTM Data Elements (with values for my variables- see point #2) and trigger DTM Direct Call Rules to fire beacons at the right time (point #3). If I hadn't cared about setting custom variables and truly just wanted to leave it to bare minimum page view tracking every time the view changed, I could have put the DTM library on my index.html, then just set an event-based rule that looked for something like locationchange (https://www.digitaldatatactics.com/index.php/2016/04/20/how-do-i-use-dtm-for-a-single-page-app/ has info on that).