July 18, 2018

Angular, Preserving Query Params and Google AdWords

… and how all this leads to an incorrect source of traffic in Google Analytics and incorrect conversion attribution.

 

The situation is as follows:
On www.thecodecampus.de we run an Angular 6 page. We advertise our product with Google AdWords. If a visitor comes via Google AdWords, the URL is appended with a glcid and several campaign parameters as query params. This data is important for tracking, as Google Analytics determines to which source a conversion/visit is to be attributed.

Without this information, we cannot determine (in Google Analytics) whether a visit or booking was made through Google AdWords or any other source. The data is accordingly important to us. Unfortunately, Angular is configured by default to remove any query parameters when navigating.

This means that the GCLID is still present on the initial page, but if the user clicks on another route within the Angular application, the URL is removed and the data is lost.

In order to fix this problem you can either use queryParamsHandling on each router.navigate() call and on each routerLink. But that is not practical. Another option is to use a directive that updates each routerLink accordingly with the current query parameters as shown here. But this solution doesn’t cover router.navigate() calls from component classes.

Another solution is to use guards until the issue in the official repository is resolved. But this requires you to set runGuardsAndResolvers for the guard to always and to cancel all navigation requests and is a very hacky solution:

 

 

Can Kattwinkel
Developer at thecodecampus </>


Leave a Reply

Add code to your comment in Markdown syntax.
Like this:
`inline example`

```
code block
example
```

Your email address will not be published.