Replies: 1 comment 1 reply
-
|
Have you try to not use {gtm && <script type="text/javascript" dangerouslySetInnerHTML={{__html:`your JS code with ${gtm} id as string here`}} />} |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Thanks for the suggestion. This way I don't have the script with the GTM ID showing where it shouldn't, but the issue now is that the GTM script is not loaded properly when I do it like this, with |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Description
I have one template and a couple of dozens of statically generated pages based on that template. My client's requirement is that each of these pages should have a different Google Tag Manager ID, fetched from CMS (Airtable). That is why I chose to add GTM ID via React Helmet and not using the gatsby-plugin-google-tagmanager, since I don't have those IDs available in gatsby-config.js. Some of the pages that don't have the GTM code.
All the data is fetched inside the gatsby-node.js and then passed to the template . It shows in the template correctly.
GTM script should be loaded only if the page has corresponding GTM code:
This code is wrapped with
<Helmet>. When Iconsole.log(gtm)it shows the correct info both in browser and on server (string or null).Problem
When navigating away from the page that has GTM ID in the
<head>to the page that doesn't have GTM ID using Gatsby's component, the existing GTM script is somehow preserved in the<head>. When I use browser's back button to go back to a page that should have GTM script, another script with the same ID is loaded (and it happens the 3rd time and so on).Question
The GTM script only shows with the correct ID, and it only shows once, on the pages where the condition (the gtm variable is not null) is met. The pages that don't have GTM ID, do not have GTM script in the
<head>.Given that I first have to fetch all Google Tag Manager IDs and then pass them to my template and that I cannot use .env file for that purpose, how can I achieve this?
Additional Info
Gatsby version: 4.0.2
React Helmet version: 6.1.0
Gatsby Plugin React Helmet version: 5.2.0
Beta Was this translation helpful? Give feedback.
All reactions