0

I'm trying to track outbound links using Google Analytics as discussed here: https://support.google.com/analytics/answer/1136920?hl=en

The links that I need to track are contained in the article body field in Expression Engine and I need the code to be formatted automatically because our users don't have the technical ability to add tracking code to all of their links.

What I did is put the article body in a div with an id of 'article_body'. What I would like to do with Javascript is to add the code necessary to track the event when the page loads.

I need the links in the article_body div to change from:

<a href="http://www.foo.com" target="_blank">Foo</a>

to 

<a href="http://www.foo.com" onclick=”trackOutboundLink(‘http://www.foo.com’); return false;" target="_blank">Foo</a>

Is anyone aware of a way to do this in js or can you point me in the right direction?

Thank you very much, I appreciate your assistance.

Learjet
  • 1
  • 1

2 Answers2

1

Here's a great resource tracking this sort of activity:

How to Track Downloads & Outbound Links in Google Analytics

Requires jQuery and is in no way related to EE but it is VERY comprehensive and can easily be customized for your needs.

AllInOne
  • 1,450
  • 2
  • 14
  • 32
  • also note that the jQuery used there is minimal, can easily be altered to not depend on it. Another note: that code uses a `setTimeout` to ensure the link is tracked. I don't know whether it's because the article is that outdated, or if author didn't know (to be fair, it's not actually documented in the google docs for `_gaq` style tracking) but GA does have a [built in callback function](http://stackoverflow.com/questions/4086587/track-event-in-google-analytics-upon-clicking-form-submit/12461558#12461558) so you don't have to rely on `setTimeout`. – CrayonViolent Mar 26 '14 at 16:16
0

I've been attaching outbound links in a click handler and passing the values in as data-attributes. That way you can have 3 fields in Expression Engine and they can fill them out automatically. (Maybe a checkbox as well to note it's a trackable outbound link). It's been awhile since I've used EE though.

    // Basic Click Tracking
    $(".track").click(function(e){
        var $this = $(this),
            $trackCat = $this.attr('data-tracking-category'),
            $trackAction = $this.attr('data-tracking-action'),
            $trackValue = $this.attr('data-tracking-value'),

            _gaq.push(['_trackEvent', $trackCat, $trackAction, $trackValue]);
    });

Something like

     {#if tracking_link}

        <a href="{{url}}" class="track" target="_blank" 
        data-tracking-category="{{tracking_category}}" 
        data-tracking-action="{{tracking_action}}" 
        data-tracking-value="{{tracking_value}}">
    {/if}
Christopher Marshall
  • 10,678
  • 10
  • 55
  • 94
  • Thinks for taking the time to answer Chris. The problem is the article body field is entered in a WYSIWYG editor and I can't use the approach that you mentioned. I do have the templates hard coded like you mentioned though. – Learjet Mar 26 '14 at 15:46
  • This sounds way out of scope, but is there the possibility of adding a "Tracking anchor" button to the WYSIWYG editor that inserts a predefined anchor to the text area? That way the content editors could be able to add the parameters themselves. – Christopher Marshall Mar 26 '14 at 16:05
  • Although not impossible the approach that you mentioned would work on articles that have been entered today and forward however, we are trying to avoid going back and editing all of the previous content. – Learjet Mar 26 '14 at 16:13
  • Good point. Well unless your tracking parameters are static for your links, you'll definitely need to have some sort of field in the CMS for your content editors to add the values. Maybe load them in an object in the template, and attach that to the tracking handler. And of course that becomes a problem with more than one trackable link =\ – Christopher Marshall Mar 26 '14 at 16:16