Help with Google Tag Manager

Design help Custom code
1

I’ve searched the forums for information, but the majority of the forum posts on the topic have either not been answered at all or what workaround (placing the per-page code in an embed code container just below the body and removing the “script” tag) I have found is not working and results in a " No HTTP response detected" error from Google.
Read Only Link: https://preview.webflow.com/preview/pivotal-it?preview=06cc96718c14c579fb7089680bf9ba91
Live Site: https://www.itispivotal.com/

Any help is greatly appreciated!

2

@Rowananye

Hey Beth,

I ran into a similar issue while setting up the same for my website. I copied the analytics code as the last piece of code after all other scripts in the head area and that seemed to fix. I dont know why but just try it might work for you.

If you do this, do not enter the Universal Analytics code in the SEO section of your site’s settings since this always adds it at the top.

1 Like
3

You should be able to integrate the Google Tag Manager script by simply pasting it in head section of your custom code in the main site settings?

4

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 ”

5

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.

6

hey Beth,

Did you follow this guide from google?

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

7

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.

8

Hey guys, I wrote up a post on this that can help you get set up: Integrating Google Tag Manager with Google Analytics in Webflow | by Cameron Roe | Medium

1 Like
9

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

10

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

11

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!

8 Likes
12

@Tony_Worm,

Can you walk me through your solution?

13
  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

5 Likes
14

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!

15

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.

16

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:

17

webflow-gtag
webflow-gtag1923×1047 383 KB

1 Like
18

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?

19

@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.

20

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

1 Like