Google analytics and jQuery fullpage.js

Question

i've got a fullpage.js jquery single-page website. And I want google analytics to track when someone enteres another "page" of my single-page website by scrolling. The page is not loaded but the domain changes like .../#section1, .../#section2

www.cima-ecuador.com

I'm using the analytics.js... The threads already posted didn't really help me.

header:

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

  ga('create', 'UA-12543942-1', 'cima-ecuador.com');
  ga('require', 'displayfeatures');
  ga('send', 'pageview');
</script>

my body-sections are like

<div class="section" id="section0">
</div>

<div class="section" id="section1">
</div>

SPAs are not really SEO friendly...Can you put the analytics code in a function and call it each time you enter a section with something like analytics('section1'). Just a thought... — Geo, May 15 '14 at 22:21

score 4 · Answer 1 · answered Mar 24 '15 at 17:16

It's actually enough if just add after the <body>

<script type="text/javascript">
  (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-XXXXXXX', 'auto');
</script>

And then in afterSlideLoad

        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
            ga('send', 'pageview', { 'page': anchorLink, 'title': slideAnchor });
        },

Otherwise (as per other answers) you will be loading (downloading) analytics.js file from google each time you load new slide. This file is only needed once.

score 2 · Answer 2 · answered May 27 '14 at 13:44

Heres my solution. I call the analytics every time a slide loads trough the standard function of fullPage.js:

    afterSlideLoad: function(anchorLink, index, slideIndex, direction){

    (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-YOURANALYTICSID', 'domain.nl');
    ga('send', 'pageview', { 'page': document.location, 'title': document.location });

    }

Notice i use a custom ga('send'... If you dont, Google will track websitehits. Every hit will be /. With javascript i send the current url to analytics.

score 2 · Answer 3 · edited Sep 15 '14 at 07:46

Changed the send function a bit.

Now it shows /page instead of /http://www.example.com/#page. A little bit of an improvement.

ga('send', 'pageview', { 'page': anchorLink, 'title': anchorLink });

So it becomes

afterSlideLoad: function(anchorLink, index, slideIndex, direction){

    (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-YOURANALYTICSID', 'domain.nl');
    ga('send', 'pageview', { 'page': anchorLink, 'title': anchorLink });

}

or if you don't use slides

afterLoad: function(anchorLink, index){

    (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-YOURANALYTICSID', 'domain.nl');
    ga('send', 'pageview', { 'page': anchorLink, 'title': anchorLink });

}

score 1 · Answer 4 · answered Aug 26 '14 at 14:11

thanks for this code, works great ! I added "slideAnchor" to the afterSlideLoad version to be able to show the correct slide in the section. This will show up as

afterSlideLoad : function(anchorLink, index, slideAnchor, slideIndex){

(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-YOURANALYTICSID', 'domain.nl');
ga('send', 'pageview', { 'page': anchorLink, 'title': slideAnchor });

}

Active Page will you give the section the visitor is on and Page Title will give you the slide.

Google analytics and jQuery fullpage.js

4 Answers4