I was reviewing some code for a past client with a colleague of mine recently, and they became very excited about one particular feature.
We had customized the Hyperlink Manager so that it would automatically include a Google Analytics tracking event when the link was rendered – allowing the client to maintain an extensive analytics store when transferring to a Sitecore-based site.
My colleague Ben Golden mentioned this in a video interview in this blog post. I wanted to build on the lessons from his post and show an example of how to implement this automatic analytics link rendering.
Many of our clients come to us with the goal of rebuilding an existing web site in Sitecore, rather than creating something completely new. Over the years, we’ve learned to ask in our discovery sessions if the client is tracking any parts of their existing site (including document downloads or outbound links) with analytics software. The client may or may not realize it, but keeping those analytics tags the same on the new site can be a huge asset when redesigning the site. The goal of this article is to show how easy it can be to allow the content editors to maintain these analytics tags in the new site implementation in Sitecore.
You can also use this customized Sitecore feature in your current site.
- Make your content author’s life easier by enabling them to maintain analytics tags within the Hyperlink Manager.
- Add analytics tracking to ALL kinds of links in the Rich Text Editor using the Hyperlink Manager – internal links, email links, external links (use different tracking keys for links that open in a new window), etc.
Following Ben’s excellent instructions, we first modify the /Sitecore/shell/Controls/Rich Text Editor/EditorPage.aspx file to point to our new Hyperlink Manager dialog. Next we copy the existing LinkManager.ascx file out of the Telerik.Web.UI.dll using Reflector. For our purposes, we will be adding a new text field to the Hyperlink tab of the Hyperlink Manager, as shown below. This is where the content editor will enter the key used for a link in Google Analytics.
This is easy to add to the markup by just adding a new table row and textbox:
Next, we have to modify the getModifiedLink function to take our new data field into account:
These functions are utilized by the _loadLinkProperties function that already exists as part of the dialog component. One line is modified near the end of this function, and another is added:
That looks more like it, doesn’t it? You can see that we look for all links on the page with “tk=” in their href attribute, take that querystring out of the URI and add an onclick attribute with the appropriate values. This is the “missing link” that moves the tracking key from being an attribute of the URI to being sent to Google via their gaq.push API call.
(Thank you to Adam Weber for his contributions to the code in this post!)