Using library about angular-google-tag-manager HOT 11 CLOSED

@Mizyan take a look at this : https://itnext.io/how-to-add-google-tag-manager-to-an-angular-application-fc68624386e2

from angular-google-tag-manager.

Hi Mizyan,
to use the service you simply need to provide it in your module (take a look to the readme)
then inject it in your controller's constructor like:

    constructor(
        private router: Router,
        ...
        private gtmService: GoogleTagManagerService,
    ) {

the simplest way to use the library is provide it in your module and just invoke the "pushTag" method, gtm tags will be added to dom automatically, example:
this.gtmService.pushTag({vent: 'application_loaded'});

if for some reason you don't want to push any tags simply invoke the "addGtmToDom" method in any controller of your application, controllers outside the router outlet are the best ones (In my applications I use it in the header conntroller)

the library is extracted from a service that my company is using in production with angular 8 applications so should work fine with angular 8

feel free to contact me for further information

from angular-google-tag-manager.

exactly, you have to invoke the pushTag method for the events you want to track ()

I'm currently working on a small example application to include in the repository

from angular-google-tag-manager.

I think you have some issues inside your google tag manager configuration, you need to to setup your gtm to recive the informations and send it to analytics (take a look to this tutorial )
You can check the tracked events in your agular application by watching the variable "dataLayer" in your chrome console

[
  {
    "gtm.start": 1579076379537,
    "event": "gtm.js"
  },
  {
    "event": "page",
    "pageName": "/"
  },
  {
    "event": "page",
    "pageName": "/page1"
  },
  {
    "event": "button-click",
    "data": "my-custom-event"
  }
]

every time you navigate to a page o trigger an event this array will grow if the dataLayer is fine your angular setup is OK, you only need to properly configure GTM, i think you need to set add an "all pages" trigger and link it to analytics, take a look to the official google documentation

page don't have fixed attributes, you can sent to GTM every kind of custom information required by your "SEO guys"

I'm working on a complete tutorial but it require some time, I will publish it as soon as possible.

from angular-google-tag-manager.

Thank you for update, It is working, But still the google analytics not changes until refresh the page. Have i to invoke pushTag method for pageviews?
I used your code:

 this.router.events.forEach(item => {
            if (item instanceof NavigationEnd) {
                const gtmTag = {
                    event: 'page',
                    pageName: item.url
                };
                this.gtmService.pushTag(gtmTag);
            }
        });

Sorry for bothering you, But from where i can get those?

event: 'page',
pageName: item.url

from angular-google-tag-manager.

in the last commits you can find a working example in the demo-application folder

from angular-google-tag-manager.

Hello @mzuccaroli
Thank you very much for your updates, But i face a problem (and it is exist in your demo too).
in real time analytics, the urls are not changed.
Sometimes the url changed, sometimes no changed. I tried to change the component but no effect.
Question about this please:

          event: 'page',
          pageName: item.url

page is fixed attributes? and pageName? can i use it too? where i can find it in my GTM? I just want to apply this for pageviews (google analytics)
Many thanks

from angular-google-tag-manager.

Many thanks! @mzuccaroli

from angular-google-tag-manager.

Many thanks @mzuccaroli
It is woking, the problem was in my GTM, and i solved it.

from angular-google-tag-manager.

Documentation for open-source projects should not be located behind paywalls.

from angular-google-tag-manager.

I'm sorry but this is not a library issue is a GTM misconfiguration, that is not purpose of this project.

from angular-google-tag-manager.