How to use google analytics from jade file

Question

I want to track the users of my website. Since I do not have an old fashioned HTML file, should I adapt the given code to the jade syntax or can i leave the script untouched and include it somehow?

In case I need to convert it to jade syntax, can this be auto generated by some tool.

<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','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-X', 'domain.com');
  ga('send', 'pageview');
</script>

Whoops

Hey, added a different way to do this. hope it helps you. – Mvd

Answer 1

The solution was easy.

Step 1: i created a file called 'analytics.js' and placed the code between the script tags in it. No conversion to jade syntax needed.

Step 2: i referenced the script from the jade file

script(src='/js/analytics.js')

Whoops

This is not a great solution. Now you have to send a file over the wire just for analytics. Inlining would be much better. – Clipped

Agreed, inlining is a better approach than calling an entire separate file. – Mvd

OTOH, if the Google analytics script ever changes this is way easier and way more robust to update. – Neeley

This worked fine for me. I don't think that inlining it would be a good solution all the time. I am just using it on a very small site though. – Libation

If you're inlining a master view page, you're good to go, one place to change ;-) – Mvd

Answer 2

Instead of having it look for another code file and load it. Inline (like Trevor suggested is better).

In order to accomplish this you have to make use of the script. tag.... not just script

See below:

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','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-11111111-1', 'yourdomain.com');
            ga('send', 'pageview');

Make sure the spacing and such is actually indented one tab from your stuff

Mvd

Not working for me, google tag assistant says, 'analytics code avaialble' but not executing. 'No httpresponse detected' – Ideate

Make sure your spacing is consistent – Mvd

Answer 3

As said here before - putting the GA snippet inline in your files is recommended, as the GA snippet will actually call another file (www.google-analytics.com/analytics.js), so it's a bit of a waste to GET another js file which will then GET the Google one.

However - if you do want to keep your layout.jade clean (and you should), you can put the code snippet BRogers wrote (the one that starts with "script.") , in a separate file, call it googleAnalytics.jade, and in your layout.jade just include :

include partials/googleAnalytics

(of course partials is the way I folder my views, that's up to you)

This will mean the GA snippet will be included in your pages on the server, saving you the additional GET, but still keeping your layout.jade nice and tidy.

Mikkanen

Answer 4

2019 GTag Update

The traditional GA script is replaced by this new GTAG Script

script(async='', src='https://www.googletagmanager.com/gtag/js?id=UA-11111111-1')
script.
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-11111111-1');

Doityourself

Answer 5

Now it is Pug. Nonetheless. You can just include .html file with all google analytics code.

include includes/google_analytics.html

Skewness

Answer 6

In case you still want to add it inline way, here is the gist, I use 4 spaces for indentation. You can call it like this +ga('yourid12345')

Also here is the pug google analytics mixin, that will output the same script as you can find in HTML5 boilerplate.

Elston