Luqman Marzuki

Luqman Marzuki writes about anything



Ajax Load dan Track Page View on NextGen Wordpress Slideshow

Ajax Load dan Track Page View on NextGen Wordpress Slideshow

This tips is for when you are having trouble with NextGen Wordpress Slideshow in making the next and previous image load with AJAX. Also if you want to count the next or previous image load as page view in Google Analytics.

Steps to make NextGen Wordpress Slideshow load next and previous images with AJAX:

  1. Make your page to include these three js files from NextGen plugin folder:
    nextgen-gallery/js/ngg.js, nextgen-gallery/js/ngg.slideshow.min.js, nextgen-gallery/shutter/shutter-reloaded.js

    If you don't know where they are, it should be in yourwordpressfolder/wp-content/plugins/nextgen-gallery. Or use the wordpress codex plugins_url() to save the trouble.

  2. Modify ngg.js file and put this on the first line:
    var ngg_ajax = {
    path: "http://yourwebsite.com/wp-content/plugins/nextgen-gallery/",
    loading: "loading",
    callback: "http:///yourwebsite.com/index.php?callback=ngg-ajax" 
    };
    
  3. The file path is under assumption that you had never change the plugin directory path in your Wordpress installation.

  4. And that's it.
     

Steps to count the next or previous image load as page view in Google Analytics:

  1. Open the Wordpress plugin folder and locate the file /nextgen-gallery/js/ngg.js

  2. Find this lines (there are 2 occurences):

    jQuery("a.ngg-browser-next").click(function(e) {return ngg_ajax_browser_navigation(e, this); });
  3. Replace them with this:

    jQuery("a.ngg-browser-next").click(function(e) {
     _gaq.push(['_trackPageview']);
     return ngg_ajax_browser_navigation(e, this);
     });  
  4. Find this lines (there are 2 occurences):

    jQuery("a.ngg-browser-prev").click(function(e) {
     return ngg_ajax_browser_navigation(e, this);
     });  
  5. Replace them with this:

    jQuery("a.ngg-browser-prev").click(function(e) {
     _gaq.push(['_trackPageview']);
     return ngg_ajax_browser_navigation(e, this); 
    });  
  6. Let me explain the previous 4 steps. It is basically inserting a Google Analytics method function _gaq.push(['_trackPageview') that will be triggered each time the user clicks on next and previous image button.