Track Anything on Your Site in Google Analytics
Track Anything on Your Site in Google Analytics
Recently, we needed a way to hijack all of the links on a page, and add some additional Google Analytics tracking. I was initially going to use some of the methods I had written about in a previous blog post. A lot of time had passed since using that method, so we decided to see if there was a module that accomplished the same task.
Lo and behold, there is now a module that does exactly that. It's an api module that allows you to write a hook that will hijack anything across an entire site, according to a css selector. The module is called Google Analytics Event Tracking.
It had a few issues, but they were easy to fix. For example, the hook it used was hook_api rather than the listed hook_google_analytics_et_api. I fixed the issues in a patch. The patch also includes two new tracking replacements. The original only had a replacement for "!text", which would take the text within the hijacked object, and use it as the category, action, or label of the event, depending on where it was placed in the hook. I added two additional replacements for "!href" and "!current_page". "!href" uses the href attribute of the selector, and "!current_page" grabs the current url. In addition, if href is undefined, or any of the tags are not set for a particular selector, the function returns without tracking the event.
This is a very powerful tool to add to your tracking toolset. Basically, it will allow you to take absolutely any object or group of objects, whether they be links, divs, spans, etc, and track any action on those objects, whether it be a hover, a click, mouseup, mousedown, etc. So far, we have only tested with the "click" action, but any problems with the others could be easily fixed.
The hook to set all of the work is extremely simple to write. Here is an example of a crazy hook that hijacks every single link on an entire site, and uses the new replacements to track every internal click made from one page on the site to another:
<span style="color: #000000"><br><span style="color: #0000BB"><?php<br></span><span style="color: #007700">function </span><span style="color: #0000BB">hook_google_analytics_et_api</span><span style="color: #007700">() {<br> return array(<br> array(<br> </span><span style="color: #DD0000">'selector' </span><span style="color: #007700">=> </span><span style="color: #DD0000">'a'</span><span style="color: #007700">,<br> </span><span style="color: #DD0000">'category' </span><span style="color: #007700">=> </span><span style="color: #DD0000">'!href'</span><span style="color: #007700">,<br> </span><span style="color: #DD0000">'action' </span><span style="color: #007700">=> </span><span style="color: #DD0000">'Internal click'</span><span style="color: #007700">,<br> </span><span style="color: #DD0000">'label' </span><span style="color: #007700">=> </span><span style="color: #DD0000">'!current_page'</span><span style="color: #007700">,<br> </span><span style="color: #DD0000">'value' </span><span style="color: #007700">=> </span><span style="color: #0000BB">0</span><span style="color: #007700">,<br> </span><span style="color: #DD0000">'noninteraction' </span><span style="color: #007700">=> </span><span style="color: #0000BB">TRUE</span><span style="color: #007700">,<br> ),<br> );<br>}<br></span><span style="color: #0000BB">?><br></span></span>
The "selector" is the css selector. In this case, we are selecting all anchor tags on the site. This is probably not very efficient, but shows the power of what can be done with this tool.
The "category" is the Category of the GA event, which will be listed in the categories section under the events, when viewing the results in GA. In this case, we are using the "!href" replacement. Since links with no href are skipped, we don't have to worry about removing them within the selector, although it may be more efficient if you have a lot of such anchor tags.
The "action" can also be a replacement, but is normally plain text. It will show up in the Action section of your GA events.
The "label" is the information you find after clicking on the category from within the Events section of GA. In this case, we are tracking the page we are currently on.
The "value" can be any numerical value. This will normally be a 0 or 1, unless you are doing something tricky with your selectors to grab additional information. You could get really creative with that one.
"noninteraction" should be set to true, unless you wish the event to be used in bounce-rate calculations.
For the hook example above, you will have the following results in GA:
You would go to the Events section of Content, then click the "Internal click" action to see the results. You would then have a list of URLs from which to choose. These URLs are the pages that came up as a result of clicking on links within the site. If you click on one of the URLs, you will see a list of all the pages that had links to the URL that were clicked.
This is just one example of what can be done with this module. You can track almost anything. I was even considering adding an admin section to set up additional replacements, so replacement items could be added. You could use things like rel, src, title, etc. Anything that can be an attribute on an object could also be used as a replacement. Perhaps all attributes could be added as replacement options.