angulartics2

angulartics2 copied to clipboard

Hi I have setup Google Tag Manager and added the script at the beginning of the body tag. I have set it up like it shows in the readme and added the AngulariticsModule etc. In the readme it says that adding this it will automatically send route changes to Analytics in my case Analytics inside Google Tag Manager.

But when I go to Google Analytics and view Realtime Overview. I can see that it shows up correctly but when I go to a different route it doesn't update the activepage. So I am not sure if it works correctly. However when I press F5 it does change the activepage inside Analytics.

I am using Angular Cli 1.0 which uses Angular v4.0.

imports: [
		BrowserAnimationsModule,
		BrowserModule,
		FormsModule,
		HttpModule,
		RouterModule.forRoot(routes),
		Angulartics2Module.forRoot([ Angulartics2GoogleTagManager ]),
	],

export const routes: Routes = [
	{
		path: '',
		redirectTo: '/nl/landing', pathMatch: 'full', //main language set here
	},
	{
		path: ':lang',
		resolve: {root: RootResolver},
		
		children: [

			{
				path: 'landing',
				component: LandingComponent,
				data: {title: 'Landing'}
			},
			{
				path: 'earlybird',
				component: EarlybirdComponent,
			},
		]
	}
	

Did I miss something please help.

Try to import Angulartics2GoogleTagManager in your main component.

Already added inside the app component like this:

export class AppComponent { constructor( public angulartics2GoogleTagManager: Angulartics2GoogleTagManager, ) {

Still not working.

Is there a way to manually trigger it just to test if it is working?

Yes you can manually trigger url change events by injecting Angulartics2 and using it like:

angulartics2.pageTrack.next({
          path: this.settings.pageTracking.basePath.length ? this.settings.pageTracking.basePath + url : location.prepareExternalUrl(url),
          location: location
        });

I just tried triggering the pageTrack like this inside a different component:

angulartics2.pageTrack.next({
          path: '/testpath',
          location: '/testlocation'
        });

Nothing is happening. I don't think my Angular app is using the Angularitics. Is there another way of checking if Angularitics is being used?

The problem may be in your Google Tag Manager (GTM) setup. Your GTM needs to listen for the "Page View" event emitted by Angulartics2GoogleTagManager. If GTM doesn't listen for that event then you will see nothing.

Try this in the GTM portal (tagmanager.google.com):

1. Login and go to Workspace area
2. Click on the Tags section on the left
3. Click the red NEW button to create a new tag
4. Click the pencil icon in the upper right of the Tag Configuration card
5. Select Universal Analytics as the tag type
6. Enter your Tracking ID
7. Keep "Page View" selected in the pulldown
8. Click the pencil icon in the upper right of the Triggering card
9. Click the + in the upper right to add a trigger
10. Click the pencil icon in the upper right of the Trigger Configuration card
11. Choose "Custom Event" on the right as the trigger type
12. Enter "Page View" (w/o quotes) as the Event name
13. Click the blue Save button in the upper right of the page
14. Give the trigger a name, e.g. "Angulartics2GoogleTagManager Page View", and Save
15. Click the blue Save button in the upper right of the page
16. Give the Tag a name, e.g. "My_Site_GA_Page_View"

Now try to see if you see route changes.

This chrome extension may help:

https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en

Good luck.

Ah it works now. Are there other things that need different kind of way of using GTM with Angular? Or is the Page View the only thing?

Cool. @tw3 would you be willing to compile this information into GTM documentation for future reference?

https://github.com/angulartics/angulartics2/issues/99#issuecomment-282915081

This post seems to have a lot more of the options, I'm trying to add them to my site now.

I managed to set it up thanks to the step above (thanks @tw3)

In Firefox and Chrome I see the page views in the realtime view on a route change, on IE and Edge however, they are never shown... I noticed however when running GTM in preview mode that the order of the events are fired differently. For Firefox and Chrome:

1. Page View
2. DOM Ready
3. Page View
4. Window Loaded

For IE and Edge:

1. Page View
2. Page View
3. DOM Ready
4. Window Loaded

Could this be the reason? If yes, any idea how to fix this?

Have you guys enabled the trigger type "History Changes"? see https://support.google.com/tagmanager/answer/6106961?hl=en#HistoryChange

If anyone has a chance, please make a pr to update the readme with a solution that worked to the readme in the gtm folder https://github.com/angulartics/angulartics2/tree/master/src/lib/providers/gtm

I'm seeing some strange results too. Sometimes if I track myself in real time the page change shows, sometimes not. I just can't see a pattern that would give a clue to what's wrong. One thing I wondering is if Universal SSR is causing a issue.

When I load the Universal version of my I get the following events

1. Page View
2. DOM Ready
3. Page View
4. Window Loaded

So I'm getting a extra page view with Universal but that 1st Page View shows as no tags fired, only the second one shows.

I'm a bit confused but pretty sure it's causing low bounce rate figures which I previously reported. I thought I'd done something wrong but I been through my setup which follows the suggestion in this post https://github.com/angulartics/angulartics2/issues/99#issuecomment-282915081

yep, same here - generic "Page View" preset trigger from GTM doesn't work but if I do a customer event trigger with name "Page View" - it works

thanks @tw3 !

Still not solved, at least in my case..