How to avoid TagManager.initialize() running many times

[vanminhquangtri]

Hello.

In my React component, I have to get gtm-ID from another data which change many time. Each time this data changes, my component render. And each time component renders, function TagManager.initialize runs again, this create duplicate gtm scripts (as attached).

My code:

useEffect(() => {
   if (data.gtm_id){
     TagManager.initialize({
      gtmId: data.gtm_id,
     });
   }
}, [data.gtm_id])

Could you please advise me how to avoid function TagManager.initialize() to run if it already run?

Thank you.

[seandelaney]

+1

I have the same issue

[vanminhquangtri]

@seandelaney have you found solution?
Currently I have to check if the above script tag already existed, will do nothing.
But I think this solution is not safe because actually I don't know what this library does in the background.

[seandelaney]

@vanminhquangtri No solution yet

[mouthzipper]

We have the same issue. Any hacks on this?

[drplauska]

I'd recommend to just keep track of gtm_id and check if it was previously used before initialising it again

[Sashaejarque]

There is any solution for this bug?

[gcko]

@vanminhquangtri Based on what you wrote, the initialize function will be called again if data.gtm_id changes. As written, because you have passed data.gtm_id as a dependency on useEffect, it will be called any time it is modified. A potential solution here would be the following:

useEffect(() => {
   if (data.gtm_id){
     TagManager.initialize({
      gtmId: data.gtm_id,
     });
   }
}, []) // Remove data.gtm_id from the dependencies

[giorgiabosello]

+1 on this.

A callback function with onLoad should be helpful. Or the implementation of useScript hook inside the react-gtm module would be helpful.

[Vepsur]

I couldn't think of anything better than checking existing scripts on the page.

const gtmScriptUrl = 'https://www.googletagmanager.com/gtm.js';

function useGTM(gtmContainerId?: string) {
  React.useEffect(() => {
    // check for existing GTM script for preventing double initialization
    const scriptExists = Array.from(document.scripts).some((script) => {
      if (!script.src) return false;
      const url = new URL(script.src, window.location.origin);
      return url.href.includes(gtmScriptUrl) && url.searchParams.get('id') === gtmContainerId;
    });

    if (scriptExists) return;
    if (!gtmContainerId) return;

    const tagManagerArgs = { gtmId: gtmContainerId };
    TagManager.initialize(tagManagerArgs);
  }, [gtmContainerId]);
}