Sitecore is a beautiful platform with lots of great tools that can be used without any custom backend development. But sometimes you get stuck and you wonder why certain essential and simple things cannot be achieved without custom development. Luckily Sitecore has hidden gems that makes life easier(at least my life). Here is one I want to share with you.
The goal
I always wondered why there is no functionality with which I can trigger a goal by a click on a hyperlink or button. More technically a click on an anchor tag (<a href=””>Link</a>) or a button (<button></button>). Seems pretty straight forward right? Unfortunately a goal can only be triggered by a page visit, or by functionality that supports it, such as a save action with Sitecore 9 Forms.
But most marketers need options to trigger goals by clicking on a Call To Action button. Or by toggling an accordion or playing a video. I had a similar requirement. For a customer of mine we are building a simple marketing automation campaign with one landing page. On this landing page we have several Call To Action buttons which are added via the Rich Text Editor. These buttons do not navigate the user away, but should trigger the enrollment in another marketing automation campaign. I want to use a goal for this because it does two things:
- Collect analytics for the Call To Action button.
- Act as a trigger to enroll contacts in a marketing automation campaign
I thought I needed custom development for this. But thanks to my colleague Gert Maas there was another solution which is documented in an old reference guide of Sitecore 6.5 (see https://sdn.sitecore.net/upload/sitecore6/65/engagement_analytics_configuration_reference_sc65-usletter.pdf).
Basicly you can set the name or id (id would be better) of a goal or event in the URL by using the string parameter sc_trk in the URL for a Sitecore item. This triggers the goal.
My solution
At first I thought I was saved but then I immediately realized that adding a query string to a page would ruin my page analytics. After all, I had to do some sort of request to a page (perhaps the same page the user was already on) in order to get the goal triggered. That’s not an option.
My second thought was to create a blank page and use that. But that page should be anonymous accessible, which means users can potentially see this blank page. Although I can exclude indexing this page by search engines it still was accessible. Not good enough.
So I started thinking again. In Sitecore everything is an item. Not only pages but also assets like images and video’s. So why not introduce a good old friend, the 1×1 white measure pixel image! So I created this image, uploaded it to Sitecore and published it. In a browser I browsed to the image by using the Sitecore item path (not the actual image link with the file extension!) and added the query string sc_trk=Id of your goal. And yes, the goal was triggered.
Now to make this a little bit more robust, I created a little JavaScript code with jQuery that handles a click on an anchor tag. In the anchor tag I used a data attribute which contains the name of a goal. So the HTML of the anchor looks like this:
<a href="#" data-goal-trigger="{7DE5CC49-D985-49E1-AC61-663A1411AE42}">Click me!</a>
And the JavaScript I used looks like follows:
<script>
$( document ).ready(function() {
$(".btn-list li a").click(function(e){
e.preventDefault();
$goalid = $(this).data("goal-trigger");
$goalURL="http://yourdomain/-/media/Project/Tenant-Folder/Tenant/Site/goal-measure-pixel?sc_trk="+$goalid;
$.get( $goalURL );
});
});
</script>
In the above piece the $goalURL contains the URL to the image, but without the file extension! So only the Sitecore item path, otherwise it won’t work.
I have tested it several times with several hyperlinks and it works great! How cool is that?!!
You now have created an option to trigger goals by clicking HTML elements without any custom development. Only a little piece of client side scripting and an image which acts as a measure pixel.
The cool thing is that you can measure all kinds of elements by creating goals for it. Clicking on a button, toggling accordions, play or pause a video, open or close a chat box and even on other events like focus in a form field or in a multi page form (that actually don’t use multiple pages). But this allows you also to enroll contacts in marketing automation campaigns in a whole different way. Not technically, because it still uses a goal as a trigger, but more from a functional customer journey perspective. My real life scenario is a great example of this.
There you have it! Make your marketers happy. It empowers them to achieve much more!