CODEWITHSUNDEEP
angulargoogle-analyticsgoogle-tag-managerangulartics2
ufk
ufk

Reputation: 32094

angulartics2 custom events are sent to facebook but not to google analytics

I use angulartics2 with an angular7 project to fire events to facebook and google analytics.

I have facebook and google analytics configured using google tag manager.

the problem is my custom events are fired and sent to facebook but not to google analytics.

below the <head> tag I have the google tag manager code.

in the main component typescript file I added the following code:

constructor(
  private angulartics2GoogleTagManager: Angulartics2GoogleTagManager,
  private angulartics2Facebook: Angulartics2Facebook,
  private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics
            ) {
    this.angulartics2Facebook.startTracking();
    this.angulartics2GoogleTagManager.startTracking();
    this.angulartics2GoogleAnalytics.startTracking();
...

for example when people add items to cart I want to fire an event about it.

so in my cart service I inject angulartics2 in the constructor:

 constructor(@Inject(LOCAL_STORAGE) private storage: StorageService,
                private angulartics2: Angulartics2
                )

and then where it's relevant I fire the event with the following code:

    this.angulartics2.eventTrack.next({action: 'addToCart', properties: {category: 'Cart', label: keyName, value: quantity}});

using facebook pixel chrome extension I can see that the custom event is detected, using google events chrome extension I can see that no event is detected.

what am I missing? what I didn't configure properly?

google analytics is configured properly in google tag manager, I do see users count and page views count properly.

any information regarding this issue would be greatly appreciated.

thanks

update

some more investigation information thanks to @XTOTHEL.

so in the app.component.ts constructor I only enabled google tag manager to start tracking.

unfortunately google tag manager is not detecting any events being fired.

attached a screenshot of google tag manager console after adding stuff to the cart and the angulartics2 code of adding addToCart custom event being fired.

enter image description here

update 2

tags tab for interaction addToCart

Data Layer tab for interaction AddToCart

Upvotes: 2

Views: 972

Answers (1)

Chema
Chema

Reputation: 936

I don't know if this is what you are looking for, but I got some GTM events with pushLayer method from Angulartics2GoogleTagManager, from within a Service which extends on Angulartics2GoogleTagManager:

@Injectable()
export class GoogleTagManagerService extends Angulartics2GoogleTagManager {

  public gtmProperties: GoogleTagManagerProperties = new GoogleTagManagerProperties();

  pageTrack(path: string) {
    if (typeof dataLayer !== 'undefined' && dataLayer) {
      dataLayer.push({
        event: 'pageView',
        action: path,
        'content-name': path,
        userId: this.angulartics2.settings.gtm.userId,
        ...this.gtmProperties
      });
    }
    return true;
  }

  setSearchCriteria(type: string, criteria) {
    this.pushLayer(type.toLowerCase().indexOf('listings') > -1 ?
      {
        event: 'search',
        action: type,
        'content-name': type,
        userId: this.angulartics2.settings.gtm.userId,
        searchCriteriaListings: criteria
      } : {
        event: 'search',
        action: type,
        'content-name': type,
        userId: this.angulartics2.settings.gtm.userId,
        searchCriteriaPostings: criteria
      });
  }

}

which would bring me a new dataLayer with information like this: enter image description here

Upvotes: 1

Related Questions