Multiple gtm.js loaded

[chuhancheng]

If we continuously call pushTag many time before js loaded. It would cause multiple js loading and these async js loading would cause race condition let our event order incorrect.

[mzuccaroli]

i think you have some issues in the library initialization did you followed this tutorial? https://itnext.io/how-to-add-google-tag-manager-to-an-angular-application-fc68624386e2 can you provide some code snippets of your configuration?

[chuhancheng]

Sorry for my late reply:( If we call this.gtmService.pushTag two times after app initialized.

This code would lead addGtmToDom be called two times and then doc.createElement would possibly be trigger two times. so that there would have two js be loaded.

[mzuccaroli]

the problem is in the push tag function , you don't need to use the add gtm to dom it like that, take a look to this tutorial or to the demo application included in the repositopry: https://github.com/mzuccaroli/angular-google-tag-manager/blob/master/demo-application/src/app/app.component.ts

[chuhancheng]

I had provide a sample PR. Currently we have to check whether GTMscript has loaded before we send another event.

[phatyh]

hi @chuhancheng its my solution;

my gtm service code;

customEvent(data: IData): void {
  this.send('customEvent', data);
}

pageView(data: IData): void {
  this.send('pageView', data);
}

async send(event: string = 'pageView', data: IData): Promise<void> {
  const gtmTag = {
    event,
    ...data
  };

  await this.gtmService.pushTag(gtmTag);
}

any trigger

this.gtmService.pageView({pageName: event.url});

other any trigger

this.gtmService.customEvent({
  data,
});

hi @mzuccaroli , i think update doc. btw thx to package.

thx.

[chuhancheng]

hi @chuhancheng its my solution;

my gtm service code;

customEvent(data: IData): void {
  this.send('customEvent', data);
}

pageView(data: IData): void {
  this.send('pageView', data);
}

async send(event: string = 'pageView', data: IData): Promise<void> {
  const gtmTag = {
    event,
    ...data
  };

  await this.gtmService.pushTag(gtmTag);
}

any trigger

this.gtmService.pageView({pageName: event.url});

other any trigger

this.gtmService.customEvent({
  data,
});

hi @mzuccaroli , i think update doc. btw thx to package.

thx.

Thanks.

[candidJ]

I ran into same issue as well. Did the solution work for you @chuhancheng ?

[candidJ]

hey @mzuccaroli , any solution or workaround for the problem. I went through the tutorial only to find out multiple tags loaded in demo image. Kindly refer attached.

[korneliusz-w]

Just do in constructor on onInit hook more addTag.push and GTM.js will load many times.

` ngOnInit() { const gtmTag = { event: 'button-click', data: 'my-custom-event', }; this.gtmService.pushTag(gtmTag);

const gtmTag2 = {
  event: 'button-click2',
  data: 'my-custom-event',
};
this.gtmService.pushTag(gtmTag2);`

But maybe this is not a bug https://www.analyticsmania.com/post/multiple-installations-of-google-tag-manager-detected/

[paolostefan]

@mzuccaroli if this isn't a real issue, shouldn't it be closed?