Google Analytics or Clicky tracking

carpetfiber101

Hi Armin,
Does Laytheme support Google Analytics or Clicky?
Where would I add the provided tracking script?
If tracking code can be added, does it track each page and URL? I know that this theme is a "single page" ,but I'm unsure of how that relates to tracking.
Thank you for your help!

arminunruh

Hey! You can put your tracking code inside "Lay Options" -> "Custom CSS & HTML" -> "Custom <head> Content"

Yeah because its a single page application, google analytics doesn't track each page and url out of the box.
https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications#overview

However, you can easily make this work by using autotracker
https://github.com/googleanalytics/autotrack

In your "Custom <head> Content" field you can put:

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('require', 'autotrack');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script async src='
https://cdnjs.cloudflare.com/ajax/libs/autotrack/0.6.5/autotrack.js'></script>

Of course you need to replace UA-XXXXX-Y with your UA id

I'm not sure about Clicky, I haven't used it yet.

carpetfiber101

Thank you Armin!
I will try to add the script for Google Analytics.

I tried Clicky with Lay Theme and it works like a charm. The team at Clicky mentioned something about Lay uses History API so everything works well. Thanks again for your great theme and support.
Matt

arminunruh

Ah thats great to hear!!

arminunruh

Hey everybody,

So regarding google analytics and lay theme.

This should work:

In your "Custom <head> Content" field you can put:

<!-- 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 -->

Replace XXXXX with your tracking number.
from: https://developers.google.com/analytics/devguides/collection/analyticsjs

and this for tracking pageviews:

<script>
window.laytheme.on('newpageshown', function(){
ga('send', 'pageview', location.pathname);
});
</script>

no extra library like "autotrack" needed

docs: https://developers.google.com/analytics/devguides/collection/analyticsjs/pages

A Former User

Hi @arminunruh
This still doesn't seem to be working.

Do we still need to load the autotracker.js ?
https://github.com/googleanalytics/autotrack

arminunruh

Hey!
Oh I thought it would work and didn't test it properly.
So I tested this and this works.
Replace UA-XXXXXX-X with your tracking ID:

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXXX-X', 'auto');

// Replace the following lines with the plugins you want to use.
ga('require', 'eventTracker');
ga('require', 'outboundLinkTracker');
ga('require', 'urlChangeTracker');
// ...

ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/autotrack/2.4.1/autotrack.js"></script>

<script>
window.laytheme.on('newpageshown', function(){
    ga('set', 'page', location.pathname);
    ga('send', 'pageview');
});
</script>

Then in your google analytics dashboard go to
"Behaviour" → "Website Content" → "All Pages"
And then make sure to select the date range that covers the current day:
Screenshot 2020-01-23 at 14.38.58.png

then you'll see the pages that were visited today:
Screenshot 2020-01-23 at 14.40.02.png

jhnnslmk

This post is deleted!

lauramas

@arminunruh Hi, i tried using this code on my laytheme but for some reason it doesn't work at all :/

He'res a screenshot for it, maybe im doing something wrong?! Screenshot 2021-02-22 at 00.20.28.png

thank you!

Richard

Dear @lauramas

Just wondering if you have placed the 'page' & 'pageview' Function within a 'newpage event' :

<script>
window.laytheme.on('newpageshown', function(){
    ga('set', 'page', location.pathname);
    ga('send', 'pageview');
});
</script>

More on this topic:
https://laytheme.com/documentation.html#custom-javascript

Best :)
Richard

lauramas

Hi Richard, not sure what you mean precisely, I'm not very familiar with coding and javascript language unfortunately :? Would it be possible for you to send me precisely the whole thing I need to copy and paste under "Custom <head> Content" so I can better understand what you mean? :P Sorry and thank you :)

Richard

Dear @lauramas

Above - here is code provided by Armin:

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXXX-X', 'auto');

// Replace the following lines with the plugins you want to use.
ga('require', 'eventTracker');
ga('require', 'outboundLinkTracker');
ga('require', 'urlChangeTracker');
// ...

ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/autotrack/2.4.1/autotrack.js"></script>

<script>
window.laytheme.on('newpageshown', function(){
    ga('set', 'page', location.pathname);
    ga('send', 'pageview');
});
</script>

Then he asks that you replace Replace UA-XXXXXX-X with your tracking ID.

Then in your google analytics dashboard go to
"Behaviour" → "Website Content" → "All Pages"
And then make sure to select the date range that covers the current day

In Lay Options - Custom CSS & HTML ( located in the lefthand admin bar ) you will find an area called 'Custom <head> Content' - This is where you must paste the above code and remember to save/update at the bottom of that page.

Screen Shot 2020-09-14 at 2.51.54 PM.png

Hope this helps! :)

Best wishes & have a wonderful day
Richard

lauramas

Hi Richard, sorry for the super delayed reply on this, but I only had time to check your comment now. Thanks for your instructions, although the google analytics tracking still doesn't work (it's been a few months already) and I also couldn't find the sections that you mentioned on the google analytics board from your following comment:

"Then in your google analytics dashboard go to
"Behaviour" → "Website Content" → "All Pages"
And then make sure to select the date range that covers the current day"

There's simply no 'Behaviour' section on google analytics. I'm sending some screenshots of what the code looks like on my website and of my google analytics dashboard, please let me know in case there's anything that I need to change.

Thanks and best,
Laura

Screenshot 2021-03-29 at 15.15.12.png

Screenshot 2021-03-29 at 15.15.19.png

Screenshot 2021-03-29 at 15.17.03.png

Richard

Dear Laura

@lauramas

Thank you for the update - Will forward this and hope to get back to you shortly!

In the meantime, thank you for using Lay Theme Laura and have a wonderful day :)

Best wishes
Richard

lauramas

This post is deleted!

lauramas

Hi @Richard are there any updates?
Best,
Laura

arminunruh

Hey,

according to this
https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

It seems like you're doing things right.

Is the code executed correctly?

Can you do a console.log("hello") in here like:

window.laytheme.on("newpageshown", function(){
console.log("hello");
ga("set", …
});

if the code is executed you should see a "hello" in your console:
Screenshot 2021-04-13 at 20.08.59.png

Please always post your website address where you experience the issue. Cause right now I can't take a look at your website and see if maybe anything in the code throws an error that stops the analytics code from executing.