Using Ajax Content in Jekyll websites - Updated for universal analytics

This post is a follow-up to my previous post, "Using Ajax Content in Jekyll websites". In that post I explained how you can easily use History.js to integrate ajax loading of pages while still making sure your page url changes in the location bar and you don't break your back/forward history buttons in your jekyll website project.

The code snippet also contained code that pushed a new pageview to Google Analytics. However, things have changed a bit since that last blogpost and you probably switched to universal analytics.

So I updated the snippet to make sure it also works with universal analytics. You can find the new snippet below. Make sure you're also using jQuery on the page!

jQuery(document).ready(function($) {
    var siteUrl = 'http://'+(document.location.hostname||;

    // Make sure that all clicked links that link to your internal website
    // don't just reload the page but execute a History.pushState call
    $(document).delegate('a[href^="/"],a[href^="'+siteUrl+'"]', "click", function(e) {
        History.pushState({}, "", this.pathname);

    // Catch all History stateChange events
    History.Adapter.bind(window, 'statechange', function(){
        var State = History.getState();

        // Load the new state's URL via an Ajax Call
        $.get(State.url, function(data){
            // Replace the "<title>" tag's content
            document.title = $(data).find("title").text();

            // Replace the content of the main container (.content)
            // If you're using another div, you should change the selector

            // If you're using Google analytics, make sure the pageview is registered!
            ga('send', 'pageview', {
                'page': State.url,
                'title': document.title

Looks interesting?

Are you looking for someone who can assist you with your web project?
Someone with know-how who can handle your project completely in-house?

Contact Me!