CODEWITHSUNDEEP
javascriptjquerygoogle-analyticsbackhtml5-history
Noy
Noy

Reputation: 1268

Tracking back button clicks

As part of our new product metrics, we are required to measure the number of back button clicks on the page.

Since the site is not AJAX and we make no use in "pushState", "popState" isn't firing when clicking back in the browser.

The only purpose of catching the back button event is registering an analytics event.

After Googling it for a couple of hours, and trying out several different solutions, I came up empty - oddly enough, javascript just does not seem equipped for such a task.

Having that said, this is not a valid response :) How would you handle such a requirement?

Please note - bounty-awarded answer did not resolve my issue, but I have granted the bounty due to effort. It was the best answer undet the circumstances

Upvotes: 4

Views: 3730

Answers (2)

Sauryabhatt
Sauryabhatt

Reputation: 269

I am not sure of any shortcut process but you can try following logic if nothing else works.

If you can't measure browser back button click directly, you can measure total back and go back click count in your website. You can subtract that and get your value.

Use this code.

$('a').on('click', function(e) {
        if ($(this).attr('href') != 'javascript:void(0)') { // condition to check if its redirect href 
            e.preventDefault();
            localStorage.setItem('website_called', true);
            location.href = $(this).attr('href');
        }
    });

    window.onload(function() {
        if ((document.referrer).indexOf('yoursite.com') != -1 && localStorage.setItem('website_called') == false) {
            var backButtonUsed = localStorage.setItem('backButtonUsed');
            backButtonUsed = backButtonUsed + 1;
            localStorage.setItem('backButtonUsed', backButtonUsed);
        }
        localStorage.setItem('website_called', false);
    });

Upvotes: 1

Ganesh Gaxy
Ganesh Gaxy

Reputation: 655

You can catch the window.onbeforeunload() and use cookies to store the number of back button clicks on every backbutton fire, you can update the cookie. Try that.

Use popstate and cookies you can achieve I used a plugin called cookie

and also import them to your page.

Here is the import.

<script src="/jqueries/jquery.cookie.js"></script>

This is the code I used.

$(window).on('popstate', function () {
    var val = 1;
    if (typeof $.cookie('example') === 'undefined') {
        //no cookie
    } else {
        //have cookie
        val = parseInt($.cookie("example")) + 1;
        $.removeCookie("example");
    }
    $.cookie("example", val, { expires: 7 });
    //alert($.cookie("example"));
});

Its juzz a rough code You can make it as what you want It will create pushstate

Add this to the script..

There are just DEMO contents in HTML

<input type="text" id="t1" />
<input type="text" id="t2" />
<input type="text" id="t3" />
<input type="text" id="t4" />
<input type="text" id="t5" />

These are the HTML5 pushstate scripts without AJAXify. Try these...

    $('#t1').click(function () {
        if (window.history.replaceState) {
            window.history.pushState('', 'Title', '/YourPagename/123/1234');
        }
    });
    $('#t2').click(function () {
        if (window.history.replaceState) {
            window.history.pushState('', 'Title', '/YourPagename/123/12345');
        }
    });
    $('#t3').click(function () {
        if (window.history.replaceState) {
            window.history.pushState('', 'Title', '/YourPagename/123/123456');
        }
    });

And soon. Declare like these for others

By this it is possible.

This part is to get the url values passed, here t1, t2 will get the values associated with url

var ourl = "", t1 = "", t2 = "";
if (window.history.replaceState) {
    ourl = document.URL.toString();
    var url = document.URL.toString().replace('http://', '');
    var cnt = 0;
    for (i = 0; i < url.length; i++) {
        if (url[i] == '/') {
            cnt++;
        }
        else if (cnt == 2) {
            t1 += url[i];
        }
        else if (cnt == 3) {
            t2 += url[i];
        }
    }
}

Upvotes: 2

Related Questions