CODEWITHSUNDEEP
phpjavascriptgoogle-analytics
Pavel
Pavel

Reputation: 5353

Trying to track number of clicks in user's emails

My issue is as follow:

I'm trying to count the number of clicks on ads in our newsletter. The thing is I can't include js in emails - it's understandable. So I found a way around this by writing this small piece of code:

<script type="text/javascript" src="http://www.factmag.com/wp-content/themes/modularity_/js/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

    function getUrlVars()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');

            if($.inArray(hash[0], vars)>-1)
            {
                vars[hash[0]]+=","+hash[1];
            }
            else
            {
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
        }

        return vars;
    }

                function redirect()
                {
                    var link = getUrlVars()["page_url"];
                    setTimeout('document.location = "' + link + '"', 100)
                }
</script>
<body onload="javascript:redirect();"></body>


<script type="text/javascript">

 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-4340871-1']);
 _gaq.push(['_trackPageview']);

 (function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

</script>

It's hosted on our servers and in the newsletter the ad code has the following format:

<a href="http://www.example.com/example_ad_counter/?utm_source=banner6&utm_medium=banner&utm_campaign=banner&page_url=ad_url"><img src="ad_img_url" style="border:1px solid #000;"></a>

So what I want to do here:

  1. User clicks on ad in the email.
  2. He goes to the page with this script.
  3. Google Analytics counts the number it needs in order to track it.
  4. Script redirects user to the advertiser's page.

Now here's the deal - google analytics is not doing the count here. My guess is that I need to add something in google js in order to do so but have no clue what. Could someone help me with this one? Thanks.

Upvotes: 4

Views: 574

Answers (1)

enobrev
enobrev

Reputation: 22532

You want to make sure your redirect is called after google's code is called. Currently, you have it running onLoad. yC is correct in his comment to the question that it's likely a race condition, but pushing your setTimeout won't completely resolve that race condition.

You could try calling your redirect function after google inserts itself into the page.

The code here:

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

...is literally google adding a new script tag to your page, and then loading the analytics url into it. Brendon was right to suggest turning off async, but then I'd suggest adding your redirect call after the var s = document line (inside the function), and hoping that will give google enough time to do its dirty work and before you redirect.

If that doesn't work, then stick with yC's suggestion and push the timeout out further. Just know that the redirect delay is racing with the time it takes for google's script to load and then run, which isn't predictable. I would probably put that setTimeout in the same place I recommended calling the redirect function directly. This means that it wont even start counting the delay until google's analytics script has been added to the page.

Upvotes: 1

Related Questions