Skip to content
This repository has been archived by the owner on Nov 3, 2023. It is now read-only.

Move analytics templates to head section #8182

Closed
seaneble opened this issue Jan 12, 2016 · 9 comments
Closed

Move analytics templates to head section #8182

seaneble opened this issue Jan 12, 2016 · 9 comments
Assignees
@leofeyer
Labels
feature
Milestone
4.3.0

Comments

@seaneble
Copy link

Google has criticised some of our websites regarding the position of the Google Analytics tracking code within the source code.

According to their guidelines, one should always position the script block within the <head> section of the page and not at the very end.

I have no idea whether they changed that just recently or whether one should have done it like that all the time, but there it is.

Question is now: Should Contao change its behaviour to reflect Google's guidelines?
@leofeyer
Copy link
Member

So they suggest to move all scripts but their own to the end of the page? Why?

@aschempp
Copy link
Member

Because they can’t track you if the page is not fully loaded otherwise. If it’s at the top you’re more likely to track every visitor. Invalid argument to me :D

@marcobiedermann
Copy link
Contributor

Google Analytics gets loaded asynchronously.
Either include the original Google Analytics code:

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Or use:

<script src="https://www.google-analytics.com/analytics.js" async defer></script>
<script>
  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview');
</script>

They both do exactly the same.
@seaneble is right.
Google Analytics will trigger as soon as the content is loaded.
Including Google Analytics might be blocked by large CSS files.

If you load you CSS async as well, it does not matter where Google Analytics is included.

@leofeyer
Copy link
Member

Including Google Analytics might be blocked by large CSS files.

Moving the script to the <head> section does not fix this, though. Here's what the guidelines say:

Paste your tracking code snippet (unaltered, in its entirety) before the closing tag on every web page on your site you wish to track.

So the CSS files are included before the script anyway.

@havutcuoglu
Copy link

havutcuoglu commented Apr 26, 2016 •
edited
Loading

Can we add a checkbox in page layout for Google Analytics script to arrange it self?

Checked: [X] Show before the closing head-tag
Not Checked: [ ] Show before the closing body-tag

Also the Google Tag Assistent extension say "Code found outside of head-tag" .

@Aybee
Copy link
Contributor

Aybee commented Apr 26, 2016

I think we should decide for one best practice. Other solutions can then be done by putting the code into $GLOBALS[TH_HEAD], $GLOBALS[TH_BODY] or by putting it into own HEAD-tags with {{file::analytics_google.html5}} or whatever.

@leofeyer
Copy link
Member

As discussed in Mumble on July 21st, we will move the analytics_ templates to the head section. If someone still wants them at the bottom of the page, they can rename the template to js_.

@leofeyer leofeyer added this to the 4.3.0 milestone Jul 21, 2016
@leofeyer leofeyer self-assigned this Jul 25, 2016
leofeyer added a commit to contao/core-bundle that referenced this issue Jul 25, 2016
@leofeyer
Move the analytics templates to the head section (see contao/core#8182).
e7a0a7e
@leofeyer
Copy link
Member

leofeyer commented Jul 25, 2016 •
edited
Loading

Changed in contao/core-bundle@e7a0a7e.

@havutcuoglu
Copy link

I know this issue is closed, but I think this post should be added here.
Can we integrate in contao in addition to Google Analytics (GA), also Google Tag Manager(GTM)?
Link: https://www.google.com/intl/de/tagmanager/features.html
I am sure it will certainly be helpful for many users.
The GTM has more features and include also the GA.

Fügen Sie diesen Code so weit oben wie möglich im head-Tag der Seite ein.

<!-- Google Tag Manager -->
<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Fügen Sie diesen Code außerdem direkt nach dem eröffnenden body-Tag ein:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@leofeyer leofeyer

Labels
feature
Projects
None yet
Milestone
4.3.0
Development

No branches or pull requests
6 participants
@aschempp @Aybee @leofeyer @seaneble @marcobiedermann @havutcuoglu