Scrolling Through a NextGen Gallery

NextGen – Measuring Gallery Clicks Using JQuery

Ron Sparks Software 2 Comments

Problem

One of my websites had a problem.  When an admin embeds a NextGen gallery into a post in WordPress, image clicks are not logged as Google Analytics pageviews when a user clicks through the images in gallery.

Website

http://www.superficialgallery.com

Example NextGen Gallery URL

https://superficialgallery.com/christina-ricci-tongue/153484/

A NextGen Gallery embedded into a Post.

A NextGen Gallery embedded into a Post. (click for full size)

What Happens With NextGen Now

When the post loads, Google Analytics fires a single PageView event.  It’s the default event that fires from Google when a page loads if you’ve plugged Google Analytics into your site.  This has nothing to do with NextGen – it’s usually a setting in your WordPress theme, or you can add it yourself if you’re comfortable mucking in the underlying code of WordPress.

What We Want to Happen with NextGen

We want a Google Analytics pageview to fire for every click as the user scrolls through a NextGen gallery.

Scrolling Through a NextGen Gallery

We want a pageview fire for every image as the user scrolls through a NextGen Gallery (click for fullsize)

The Solution

The problem is that the page is not reloading as the user clicks through from image to image (which is good – that would be terrible!) . So we need to look for an event we can capture as the user scrolls through a gallery and manually throw a pageview event.

If you look closely, as you scroll through a gallery, the hash on the URL changes with every click.  For example, using the gallery example link above, we can see that the URL changes every time I click the navigation icons in the interstitial window.  Specifically, the hash at the end of the URL changes.

  1. superficialgallery.com/christina-ricci-tongue/153484/#gallery/0eb57f1c0863690c27d72b15f9269b49/7357/comments
  2. superficialgallery.com/christina-ricci-tongue/153484/#gallery/0eb57f1c0863690c27d72b15f9269b49/7358/comments
  3. superficialgallery.com/christina-ricci-tongue/153484/#gallery/0eb57f1c0863690c27d72b15f9269b49/7359/comments

This is our key to solving the issue.  We can detect every time that hash changes and fire an Analytic event.

I added this code to the site after the Google Analytics script was loaded on the page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
     $(window).bind('hashchange', function() {
        ga('send', 'pageview');
  });
</script>

Now, every time the hash changes on the page, a Google pageview event is fired.

But there’s a problem!

The code above is global code.  It doesn’t actually care if the post has a NextGen gallery in it or not.  It just fires blindly when the hash changes on a any page on the website.  This means that anchor tags in the page will also fire the pageview event, and I don’t want that – as anchor tags are a false positive and will skew analytics.

In the case of SuperficialGallery – we specialize in Celebrity Tongues.  Every single post with a NextGen gallery on it has the word “tongue” in the post name, and therefore, the URL.  So it was easy for me to make sure the above script only fires on gallery pages and, more specifically, on tongue galleries.  I just added a little code to look for the word “tongue” in the URL path, and all was well.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
      $(window).bind('hashchange', function() {
    
    var path = window.location.pathname.substr(1);
    
    if (path.indexOf('tongue') > 0)
    {
        	  ga('send', 'pageview');
    }
  });
</script>

Bonus: Logging a Custom Event

I also wanted to log a custom event in addition to a pageview.  And I wanted the post name to be the Google event action.  I did so by adding this code, in addition to the vanilla pageview:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
  $(window).bind('hashchange', function() {
      
      var path = window.location.pathname.substr(1);
      
      if (path.indexOf('tongue') > 0)
      {
      	   ga('send', 'pageview');
           
           ga('send', {
            hitType: 'event',
            eventCategory: 'ImageView',
            eventAction: path,
            eventLabel: 'Gallery'
         });
      }
   });
</script>

 

What’s missing, and I have’t coded yet, is code to pull the specific image ID from the hash so I can log the image id as the event label.  For now, I just threw in a generic ‘Gallery’ label.

That’s it – it was quick, simple, and easy.  If you have any questions, please feel free to reach out in the comments.

Ron Sparks

Ron Sparks

Science Fiction & Fantasy Author
Ron Sparks is a science fiction and fantasy author and poet. His book "ONI: Satellite Earth Series Book 1" was recently published and is available on Amazon.com. For more info on Ron, see: https://www.ronsparks.com/about/

Comments 2

  1. Hey Ron, you may want to also check out NextGen custom templates using gallery.php. This will allow you to embed an onclick event directly into the template. You will also then be able to collect the specific image.

  2. Post
    Author

    Outstanding. I’ll def check it out. I am a complete noob with NextGen – I did this hack for a friend who needed something and my initial search didn’t show much in the way of already-created solutions.

Leave a Reply