Google Tag Manager code showing at top of mobile view

My client used the Insert Headers and Footers plugin to add code for Google Tag Manager. For some reason when you view the website on a mobile device, the code appears at the very top. View the website at https://thefcatest.com.

They do not need this code and they did not use the plugin to do anything else so I had her deactivate the plugin, and then delete it hoping that it would remove whatever code it had inserted, but nothing has happened.

BTW, I have the website running via Cloudflare, and have purged the cache.

They plan to start promoting the website in 4 days, and we are hoping that we can get rid of this by then.

Thanks in advance,
Tom Rogers

PS. They have a marketing company who has requested they insert a pixel code in the head section. I’ve pasted it below. Given the issues mentioned above, I’m concerned about adding this with the Insert Headers and Footers plugin.

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '326798941162806');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=326798941162806&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Hello There,

Thanks for writing in! You have inserted the code incorrectly. The best way to do this is to use a 3rd party Insert Headers and Footers plugin. You can check out this thread as a reference: https://theme.co/apex/forum/t/facebook-pixels-header-code/19764/2

Hope this helps.

Did you read my message? “My client used the Insert Headers and Footers plugin to add code for Google Tag Manager.”

Something obviously went wrong. The question is how to fix it?
Tom

Hi Tom,

The code is showing even on desktop:

There must be something wrong on how the code was implemented. We would like to check directly. Is the code added complete? Please share credentials inside a secure note so we can investigate. We’re sorry for the misunderstanding. We love to help you figure this out. Thank you.

Please tell me how to provide confidential info?

Hi There,

Even though you have mentioned that your client use Insert Headers and Footers plugin, I cannot find it in your referenced site.

Please utilize that plugin as suggested above.


Thanks!

As mentioned in my first message, I had her remove the plugin hoping that it would remove the code, but that did not change anything. She does not need the Google Tag Manager code now.

So the question remains, how are we going to get rid of the code that shows in the header?

She does need the code for the pixel script, so I will have her install the plugin again.
Tom

3/7/18 7:04 PM EST
I installed the Insert Headers and Footers plugin again and used it to add the Facebook script which now appears in the head section as hoped.

While I was viewing the source code to see if the Facebook script was there, I pasted a copy into Dreamweaver and found a section of CSS info in the head section which includes the offending code. You can view a screenshot at https://screencast.com/t/D9OUGoisqi.
Tom

Hi there,

Have you tried clearing your CF cache after disabling the plugin? I checked and your page are served from CloudFlare, plus, you have a CF plugin too.

That one is not added through the theme or functions.php, it must be the plugin.

Thanks!

I’ve cleared the cache at cloudflare. And it made no difference. The cloudflare plugin has nothing to do with this problem. It must have been some issue with the header footer plugin. And as mentioned previously, we removed it hoping it would remove
any changes made, but that did nothing.

How can I access the CSS to get rid of the script?

Also, how can I get email notifications when you update the post?
Tom

Hi there,

It’s just part of troubleshooting since we don’t know what’s causing this. And since they are nothing to do with the issue, is it okay if you disable your CF, or completely detach your site from CF? So we could troubleshoot it without worrying about the cache.

The script is under the CSS, editing the CSS or going to that file will not fix it. My assumption is a code attached to wp_head hook. And the hook priority happened to be next to CSS enqueue. Please provide your FTP login credentials.

About the notification, could you try clicking the Tracking button and make sure it’s set to track? It’s below our thread.

Thanks!

FTP info to follow in secure message.

At 6:05 PM, 3/10/18 - I went into Cloudflare and put it in “Development Mode” which “Temporarily bypass[es] our cache allowing you to see changes to your origin server in realtime.”

Hello There,

I have investigated the issue and it turns out that the issue is coming from the Google Analytics plugin. I have disabled the plugin and moved that Google Analytics code in the Insert headers and footers plugin and still the issue exist. Upon closer look, it came from your code itself.

<!-- Global site tag (gtag.js) - Google Analytics -->
https://www.googletagmanager.com/gtag/js?id=UA-114047771-1
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-114047771-1');
</script>

The line with https://www.googletagmanager.com/gtag/js?id=UA-114047771-1 will display in the front end. I am suspecting that the GA code is not correct. Please log in to the Google Analytics account and regenerate the embed code again. This is to double check that you are inserting the correct code from Google Analytics because at the moment, it seems that the GA code was modified.

Hope this helps. Kindly let us know.

I have no luck using the pre-formatted text tool in the tool bar. So I’m doing a mix of html and simple text.

I think the Google Analytics plugin is not working properly. My client regenerated the code and you can see that it’s got more to it than what you pasted above in red. It’s supposed to start out with:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-114047771-1
<script>

The whole thing should look like this:

<!-- Global site tag (gtag.js) - Google Analytics —>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-114047771-1
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-114047771-1');
</script>

I tried pasting that it to the Google Analytics plugin which I found at X > Google Analytics But when I pasted that in, it messed up the code, so it came out looking like this:

<!-- Global site tag (gtag.js) - Google Analytics -->
&lt;script async src=&quot;https://www.googletagmanager.com/gtag/js?id=UA-114047771-1
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-114047771-1');
</script>

And the errant code showing at the top of the page changed to:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-114047771-1

I removed everything from the Google Analytics plugin and the errant message when away!

I then tried putting the code in with the Headers & Footers plugin, but the whole website got messed up :frowning: Here’s a screenshot - https://screencast.com/t/kkL9jg90QV4O

As it is now, there is no Google Analytics code.
Tom

Hi Tom,

The complete code should be


<!-- Global site tag (gtag.js) - Google Analytics —>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-114047771-1"></script>

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-114047771-1');
</script>

I went ahead and added it in Google Analytics. It should work now kindly double check.

Thanks

Sorry but that didn’t work. The errant code is now showing at the top of the page again - https://screencast.com/t/09p4TIFSyD.

And when I look at the code you pasted into the Google Analytics head section, it has been modified. It now looks like:

<!-- Global site tag (gtag.js) - Google Analytics —&gt;-->
https://www.googletagmanager.com/gtag/js?id=UA-114047771-1

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-114047771-1');
</script>

There seems to be something wrong with the plugin.
Tom

Hi Tom,

We’re sorry for the inconvenience this has caused you. I can confirm Google analytics addon doesn’t support google tag manager code at the moment. It has been forwarded to our developers already. Since the code you have added via Insert headers and Footers is working(I have checked it on the frontend), try to remove the code via Google analytics addons at the moment. See this thread for more information: https://theme.co/apex/forum/t/google-analytic-plugin-strips-code/26196/2

I have removed the Google Analytics script from the Google Analytics plugin.

Just to be sure - Are you suggesting that I use the Insert headers and Footers plugin to insert the JavaScript tracking snippet offered at the link you provided (https://theme.co/apex/forum/t/google-analytic-plugin-strips-code/26196/21)?

FYI, I asked for instructions at https://theme.co/apex/forum/t/google-analytic-plugin-strips-code/26196/5.

Hi there,

Yes, please use that plugin for now. What’s your server location? Based on our issue tracker, it mostly happens on Germany as I tried it myself in my sites and doesn’t have this issue.

Thanks!

The website is hosted on my VPS.net server account at the Softlayer datacenter in VA, near Washington DC.

Also, it’s connected to Cloudflare which I turned off until this is all sorted out. It seems that the Insert Header Footer plugin has done the trick. But will have to wait for my client to confirm.