angulartics / angulartics2

Vendor-agnostic analytics for Angular2 applications.
MIT License
1.01k stars 192 forks source link

Can't setup the tag on google tag manager #99

Open DamianKornak opened 7 years ago

DamianKornak commented 7 years ago

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

esbeto commented 7 years ago

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.

  1. angulartics page path Type: Data Layer Variable Data Layer Variable Name: content-name
  2. angulartics event category Type: Data Layer Variable Data Layer Variable Name: target
  3. angulartics event action Type: Data Layer Variable Data Layer Variable Name: action
  4. angulartics event label Type: Data Layer Variable Data Layer Variable Name: target-properties
  5. angulartics event value Macro Type: Data Layer Variable Data Layer Variable Name: value
  6. angulartics event interaction type Type: Data Layer Variable Data Layer Variable Name: interaction-type

Triggers

Name and case must match

  1. Angulartics events Event: Custom Event Fire on: interaction
  2. Angulartics pageviews Event: Custom Event Fire on: content-view

Tags

  1. 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
  2. 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
esbeto commented 7 years ago

Documentation is lacking... 😢 I hope it gets updated soon. 😄

JonnyBGod commented 7 years ago

@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.

DamianKornak commented 7 years ago

Hi thx a lot for the answer, i will try this solution asap ! Regards

DamianKornak commented 7 years ago

Works great ! thx a lot :)

ajshapiro commented 7 years ago

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"

chriszrc commented 7 years ago

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-

scttcper commented 7 years ago

If anyone has a chance please add to the readme for GTM https://github.com/angulartics/angulartics2/tree/master/src/lib/providers/gtm

esbeto commented 6 years ago

Hey @ajshapiro, these changes were changes because of how the library works now?

ajshapiro commented 6 years ago

@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.

ChBernat commented 6 years ago

Anyone has figured that out in a current version of GTM?

chriszrc commented 6 years ago

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-