Single Page Application and Javascript Tracking issues

1

Hello,

We have an Angular application and are trying to use the enableLinkClickTracking and refreshLinkClickTracking for automatic link tracking. Since this is a Single page application, we tried to use refreshLinkClickTracking but that only works for link tags that are currently visible. For example, if something gets dynamically inserted via an *ngIf that would not be tracked properly unless we did a refreshLinkClickTracking every time.

Is there any option for dynamic link tracking for single-page applications or do you have a preferred solution for single-page applications? or would we be best with manually tracking link clicks?

Thank you in advance for any advice,
Mitchell

2

@Mitchell_Woodhouse_M, refreshLinkClickTracking is specifically designed for dynamic links. You just need to make sure to call the method at the appropriate time (once the dynamic link has been rendered).

3

Thank you for the response @ihor, after looking into this further we have come up with a solution that should work for our Angular projects.

In our base app.component.html of our project, we are going to wrap our router-outlet like this:

<div (cdkObserveContent)="updateSnowplowLinks($event)">
    <router-outlet></router-outlet>
</div>

Since we are using Angular Material, we have access to their CDK which enables us to listen to content changes within the page. We then have the following in the app.component.ts file:

updateSnowplowLinks(mutationRecords: MutationRecord[]): void {
    let updateSnowplowLinks = false;
    for (let i = 0; i < mutationRecords.length; i++) {
        const aTags = Array.from(mutationRecords[i].addedNodes).filter(n => n.nodeName.toLowerCase() === 'a');
        if (aTags.length > 0) {
            updateSnowplowLinks = true;
        }
    }
    if (updateSnowplowLinks) {
        this.snowplowService.refreshLinkTracking();
    }
}

This enables us to not have to call window.snowplow('refreshLinkClickTracking'); throughout our app and only in this one place since this should listen to all of the new nodes being added.

2 Likes