angulartics2
angulartics2 copied to clipboard
Can't setup the tag on google tag manager
Hello everyone, i have issues getting the event from angulartics2On="click" angularticsEvent="DownloadClick" angularticsCategory="test" [angularticsProperties]="{label: 'Fall Campaign'}" in the Tag Assistant on chrome i get interaction: 1 { 2 event: 'interaction', 3 target: 'test', 4 action: 'DownloadClick', 5 label: 'Fall Campaign', 6 value: undefined, 7 interactionType: undefined, 8 userId: null, 9 gtm.uniqueEventId: 15 10 } any ideas how to set up the tag ? thanks by advance
for Google Tag Manager (new interface)
Add the full tracking code from Google Tag Manager to the beginning of your body tag.
Setup listeners in Google Tag Manager
Variables
Naming and case must match.
- angulartics page path Type: Data Layer Variable Data Layer Variable Name: content-name
- angulartics event category Type: Data Layer Variable Data Layer Variable Name: target
- angulartics event action Type: Data Layer Variable Data Layer Variable Name: action
- angulartics event label Type: Data Layer Variable Data Layer Variable Name: target-properties
- angulartics event value Macro Type: Data Layer Variable Data Layer Variable Name: value
- angulartics event interaction type Type: Data Layer Variable Data Layer Variable Name: interaction-type
Triggers
Name and case must match
- Angulartics events Event: Custom Event Fire on: interaction
- Angulartics pageviews Event: Custom Event Fire on: content-view
Tags
- Angulartics Events Product: Google Analytics Type: Universal Analytics Tracking ID: YourGoogleAnalyticsID Track Type: Event Category: {{angulartics event category}} Action: {{angulartics event action}} Label: {{angulartics event label}} Value: {{angulartics event value}} Non-Interaction Hit: {{angulartics event interaction type}} Fire On: Angulartics events
- Angulartics Pageviews Product: Google Analytics Type: Universal Analytics Tracking ID: YourGoogleAnalyticsID Track Type: Page View More settings > Field to Set > name: page, value: {{angulartics page path}} Fire On: Angulartics pageviews
Documentation is lacking... 😢 I hope it gets updated soon. 😄
@esbeto Thanks for stepping in.
I realise we are lacking on documentation. Unfortunately or not, I am very busy these weeks and going on vacations next week.
Also I am not an expert on many of the providers.
That said, I will try to make better documentation as soon as possible. Meanwhile, it would be awesome to get some PRs for this.
Hi thx a lot for the answer, i will try this solution asap ! Regards
Works great ! thx a lot :)
Very helpful. I had to make some changes from esbeto's post (using Angulartics2 2.2.2) to get it to work:
The event label variable set to "event" not "target-properties"
The event interaction type variable set to "interactionType" not "interaction-type"
The pageviews trigger set to fire on "Page View" not "content-view"
This is super helpful, I wasn't able to find any tutorials that talked about Data Layer Variables, but now that I see it here, it all makes perfect sense, this HAS to be added to documentation-
If anyone has a chance please add to the readme for GTM https://github.com/angulartics/angulartics2/tree/master/src/lib/providers/gtm
Hey @ajshapiro, these changes were changes because of how the library works now?
@esbeto This was as of v2.2.2. I'm now using 2.4.0 without a problem. Can't speak to whether this applies to the latest version.
Anyone has figured that out in a current version of GTM?
If anyone is still wondering what the Data Layer Variable Names should be in @esbeto's post, just look at the source code here:
https://github.com/angulartics/angulartics2/blob/2bd0508ed4094649d9be2835dbef59aca8140afc/src/lib/providers/gtm/gtm.ts#L48-L74
You can see that for instance, the :
The event label variable set to "event" not "target-properties" etc-