Ads.google.com, says to put the Google Analytics script right before the closing </head> tag:
But analytics.google.com/ says to put it after the <head> element:
Which is correct?
Related
When installing Google Tag Manager I have to add 2 code snippets into my website: one into the <head> section and the other in the <body> section. The website CMS I'm using (Teachable) doesn't give me access to the <body> section, only the <header>.
Is there a way to install Google Tag Manager properly without access to the <body>?
I tried putting both code snippets in the <head> section.
The <body> part is not needed.
The <body> part is just a <noscript> part of GTM. GTM is a js framework. The only thing <noscript> helps with is loading only pixel type tags when client has js disabled.
But people don't have js disabled. Also, it's likely that your site doesn't work when JS is disabled. Also, at the point when JS is indeed disabled, firing pixels is very likely the least of your concerns. Noscript is the remnant from the past, effectively.
I normally never install the noscript part of GTM.
I cannot for the life of me figure this out. The following site is hosted on Netlify and prerendering is enabled. When inspecting the page, all of the OG tags are correct. These tags are injected using react-helmet.
https://browniepoints.africa/opportunities/volunteer-at-a-soup-kitchen-every-week-on-thursdays
When scraping the above URL on the Facebook debugger, it responds with:
The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id
The only one of those errors/warnings that should be there is the app_id, which I don't care about.
I've waited well over 48 hours for caches to clear, I've tried scraping with query strings appended to the URL, and the images have absolute URLs. But not even the description tag is pulling through.
Can somebody that uses react-helmet and Netlify please shed some definitive light onto this problem?
This is related to a known prerendering issue.
My fix was to remove the <!DOCTYPE html> declaration from the index.html file as a temporary workaround until the above issue is resolved.
While I can't tell you exactly why. your SSR is not working correctly. Go to Chrome DevTools and click the 3 vertical dots next to Console:
Select Networking Conditions, then uncheck Select Automatically and enter Googlebot/2.1 (+http://www.google.com/bot.html):
Now refresh the page and notice that all you see on the site is some plaintext saying "html" and even your javascript bundle is missing. This is what your html looks like:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="fragment" content="!">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Brownie Points</title>
<link href="/static/css/2.3bf0f3c5.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Note that Netlify SSR is in Beta but I personally didn't have those issues with it. Have you done any other steps other than enable it? I have tested it to be working with a CRA generated app before.
I've recently moved some of our scripts into Google tag manager via Custom HTML with a document with write enabled. However, most, if not all scripts are being added to the head of the page as a async script.
For example:
<head>
<script async type="text/javascript" src="https://www.externalSite.co.uk/visitor.js?mhRand=1513770036670"></script>
</head>
Why are these being added to the head of the site, instead they should be loaded at the bottom of the page?
Am I missing a setting somewhere within GTM?
All Tag Manager Tags are loaded Async so no need to specify it.
You can not use the labels on the HTML Tag.
Since you can not control that i ll be load on the header you might want to do it as soon as possible. In order to do this just use a pageview trigger and firing priority. If any resourses depended on this script here is a nice post.
got some questions about the Google Tag Manager snippet. If I'm looking at the Google Demo Shop website the GTM implementation is like this :
<head>
<script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script>
... some stuff ...
<noscript> <iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-5Q5LZH');
</script>
</head>
So basically everything is in the header. So first question, what is this line for :
<script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script>
Second question, I've read that the code below:
<noscript> <iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-5Q5LZH');
</script>
could be implemented just after the opening of the body tag... and I've seen this a lot.
Is there some real differences between these different kind of implementation ? It doesn't seems to make any differences for Google Tag Assistant.
Thanks !
Initially Google Tag Manager recommended that the GTM snippet be located in the <body>, however it has recently updated its recomendation for it to be in the <head>.
This is most likely due to two reasons.
1) Apparently there were concerns about the way that the GTM library made modifications to the document object model which might have lead to conflicts for IE7 or older.
2) The <iframe> within the <noscript> is embedded content, rather then HTML, which is not allowed in the <head> of the document.
Recently Google has updated its guides and documentation to show a split implementation, with the in the <script> in the <head> and the <noscript><iframe> in the <body>.
This makes sense, as there is no reason why an asynchonrous JavaScript library needs to be in the <body>. As with all tracking its ideal to have the dependencies loaded as early as possible to ensure that your tracking is available prior to the user interacting with the website. However due to reason 2, the <noscript><iframe> is still recommended to be placed in the <body>.
So, to answer your questions:
1) the implementation on the Google Demo Store is incorrect, the entire code should not be placed in the <head>.
2) The <script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script> in the Tag Assistant is not the actual code, but how the Tag Management extension interprets the code.
3) The <body> implementation was the previously recommended implementation, which is why you have seen it a lot.
4) Going forward, I would recommend the implementation advised by Google when setting up a Google Tag Manager container, spiting the placement between the <head> and the <body>. This means that GTM will load as early as possible, with an iframe backup if required.
5) Tag Assistant merely checks the code against rules manually set within the extension. The obvious caveat of this is that the extension needs to be kept up to date. An example of this is that recently the GTM container id's moved from 6 to 7 characters however the extension was not updated, leading to a lot of people getting errors in the Tag Assistant stating that their container ID was incorrect.
I'm trying to make my meteor app visible to crawlers.
I've added the Spiderable package and installed Phantom.js.
When I to go localhost:3000/?_escaped_fragment_=, it's blank.
When I view the source, it's almost empty, and it ends right before the <script> tag that loads the Google Maps API:
<!DOCTYPE html><html><head>
<link rel="stylesheet" href="/eecc60f7c55db2915697d4beb05274f355ad19e4.css">
<title></title>
<!-- Google Maps -->
</head></html>
I haven't encountered any issues with this before, but it got me thinking that maybe I shouldn't be including custom <scrpit> (or <link>) tags in the app's <head>. If this is true - what is the correct way to load external assets? If it's not related to the issue, I'd appreciate any advice.
Thanks!
In relation to your first question, I am not 100% sure about this being the cause of your problem, but to answer the second, you shouldn't be including scripts/stylesheets in the head of your Meteor application.
Meteor combines all of the client-side js, css, and html for your app, and sends it all together to the client. This means you can just include your stylesheet and scripts in your app's client folder. I would try putting your stylesheets/scripts in the correct place and removing the links in your head and see if that solves your issue.
You can find more detailed descriptions of meteor here.