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.
Related
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 have a static only site which is hosted on Google App Engine. Infront of this sits Cloudflare CDN.
I have ran Googles Page insights to give me an idea how my website is performing, it is not performing well according to Google. I want Google to see it is performing well for SEO purposes.
This is the report I get from Google:
2 types of recommendations come:
1) Eliminate render-blocking JavaScript and CSS in above-the-fold content
Show how to fix
2) Leverage browser caching
For problem 1 I have tried many things I have read on Google. I have tried adding 'aync defer' to the link attribute. I have tried to make the media = print so that the browser would first render the html then apply the css later. I have tried moving the links to the stylesheets into different locations around the html document. Essentially I have tried to follow this: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery.
As of right now my html page (my website is just on static html page) structure looks like this:
<html>
<head>
<!-- all links/references to css files and javascript files -->
</head>
<body>
</body>
</html>
My second issue is browser caching which I do not understand why I am getting this error. Google App engine caches the files and then on top of that Cloudflare CDN sets the cache headers (and also gzip) on the documents so that the browser caches it (below is the Cloudflare caching components turned on).
I can see the browser is caching the static files and using those cached files in chrome tools when I run the page:
This is really the first time I have created a production static website so I may be misunderstanding many things, but I am looking how eliminate those 2 issues.
Cheers
I don't know if google is measuring this but it is often advised to load Bootstrap and Jquery from the following addresses as they are used by a lot of website and hence are already in browsers caches even if they never visited your website. (The same can certainly be found for font-awesome).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/YOUR_BOOTSTRAP_VERSION/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/YOUR_BOOTSTRAP_VERSION/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/YOUR_JQUERY_VERSION/jquery.min.js"></script>
There may be a better forum for this, but here's my problem:
I'm using several different CDN sites for CSS, jQuery, jQuery Mobile, jQuery.validate, etc. Sometime in the very recent past (last few days) the CSS that jQuery validate uses stopped highlighting the affected text boxes in red, and changing the messages to a red font.
I initially thought it was the addition of blockUI.js & css, but then I noticed that all of my fiddles I created to make the bits & pieces of this project had been affected as well, and none of them had ever had blockUI added to them, so that wasn't it.
Then I thought maybe something had changed in Chrome, so I tried in Firefox, same thing. I have a remote server where I upload test code, and it was still working normally, until I reloaded the page, then the same thing. That tells me that the change occurred in one of the CDN based files.
My question is, since I don't have downloaded versions of each of the .js & .css files, how can I determine what the change was? Is it possible to download the previous version (the version numbers in my references hasn't changed, so there's no way to tell from them.
I know I can simply go create my own .css for the highlighting & font issues, but it seems like whoever hosts these various CDN's shouldn't change them underneath you? FWIW, my primary suspect is: http://jquery.bassistance.de/validate/demo/css/screen.css, especially since it hasn't been versioned. I haven't had a chance to try to verify this yet.
For reference I'm using this array of CDN locations for my current project:
<link href="http://malsup.com/jquery/block/block.css?v3" rel="stylesheet">
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript" src="pcbclient.js"></script>
There is no CSS file as part of jQuery Validate. This plugin simply toggles two class names and those have always been .valid and .error.
The root of your problem is right here...
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
That's not a CDN link, nor is that CSS file part of the plugin. It's the CSS file used solely for the online demo page.
Everything broke for you because that URL no longer points to a CSS file. However, you should not have been hot-linking to another website's CSS file in the first place. (If it's not a URL from a CDN, it could be considered as stealing the other website's bandwidth.)
If you liked how that online demo page looked, you could have easily examined and copied its CSS properties into your own CSS file, provided that the copyright license allows it.
You might want to carefully review the rest of your file includes' URL's to make sure those are all part of an official CDN and not just hosted on these developers' websites.
It appears I was correct in surmising that the problem laid with the CSS at: http://jquery.bassistance.de/validate/demo/css/screen.css.
I still don't know what changed, but I downloaded the source from: http://jqueryvalidation.org/ (as I should have after deciding to use it), added it to my ASP.NET project and the problem has been resolved.
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.