Help with Google Tag Manager

I moved the code down to the bottom as you suggested and the second code snippet that is supposed to be inserted just after the is embedded just below the body, but it’s still not working.
The error has changed from “No HTTP response detected” to "GTM no-script code not found: either missing or not in "

There are two scripts for Google Tag Manager - One that goes in the head and one that is supposed to be placed just after the tag.

hey Beth,

Did you follow this guide from google?

I have inspected your code and found no references to google tag manager.

Yes, I downloaded the guide (and tried everything I could to get it to work) - You found no references to Google Tag Manager on our site because I deleted all of it out - no need for it if it will not work correctly in Webflow.

Hey guys, I wrote up a post on this that can help you get set up: https://medium.com/@cameronroe/integrating-google-tag-manager-with-google-analytics-in-webflow-5a7bf2afc9b3

1 Like

Do we need to remove the Google Universal Analytics Tracking ID from integrations?

This seems to be broken now, as the HTML embed is wrapped in a div, breaking the GTM after requirement

Found a solution:

  1. Follow https://webflow.com/blog/integrating-google-tag-manager-with-google-analytics-in-webflow
  2. Add the id “gtag-div” to the HTML embed

Add the following to the Project Custom Code Footer to remove the wrapping

<script>
$(document).ready(function(event) {
  /* Extract GTAG <noscript> from <div> created by HTML embed*/
  $("#gtag-div").replaceWith(function() { return $(':first', this); });
});
</script>

Cheers!

7 Likes

@Tony_Worm,

Can you walk me through your solution?

  1. GTM wants it’s snippet to be the first thing in the body.
  2. Webflow does not provide a custom section for this area like the others.
  3. You can place an HTML embed as the first element on your pages. I recommend making this one of those reusable sections. You will need to manually set this for all pages you want GTM to run on.
  4. In the HTML embed, and the GTM snippet, then set the ID to gtag-div in the RHS config area.
  5. Add my JS code to the project wide custom footer, so it runs on all pages.

So what’s happening here…

  1. Webflow loads your page with the GTM inside of a div, almost as the first element.
  2. GTM does not like this and will not run properly
  3. My JS code, because of the ID, extracts the GTM snippet from the div and puts it in the right place.

This is not ideal because GTM is not running as early as it could and we would like. This is a hack around a missing feature in Webflow, which is native integration for GTM. If they added that, we could supply the container ID and they would put the GTM snippets in the appropriate places on all pages without us needing to do more. Or have this hack of a solution.

I’m using https://docsy.dev and probably migrating to netlify. I’m a technical person though.

here’s the website: https://docs.hofstadter.io

4 Likes

Interesting situation. If I understand correctly, the problem is integrating GTM inside an HTML embed on a specific page and not all pages? What is the use case for this?

Let me know if I misunderstood that!

Thanks, @Tony.

I’m a technical person though.

I’m not a technical person. Can you explain step 4 to me in more detail?

Before reaching out to you, I had already added your script to the Project Custom Code footer, as well as placing the GTM code within a symbol, as the worthless tutorial from Webflow recommended. It seems they put all of their efforts into production and very little into useful information.

Hey @Benjamin12, I’m not Tony but I think the only thing left for you to do is to add the ID “gtag-div” to your HTML embed.

Assuming RHS meant right hand side :slight_smile:

1 Like

Can you explain?

I’m not a technical person.

Edit:

do I need to replace #gtag-div in the footer script with the entire Google Tag code that should go in the top of the body tag?

@Tony_Worm

That did it: Google Tag Assistant is now picking it up.

I’m very new to WebFlow and I had no idea what you were talking about. Thanks for holding my hand through this process.

You’re welcome, glad to hear you are up and running.

1 Like

Thanks for this! I needed to add the jQuery library in the “Head Code” section of the entire project’s “Custom Code” page to make it work.

JQuery is already loaded before body close. Scripts that depend on jQuery should be added to the body before close custom code area.

2 Likes

Right, I was actually wondering why I needed to add the jQuery link! So here’s a better solution

3 Likes