Integrating AddThis with Sitecore goals

Social buttons

We faced the requirement to add social buttons to a Sitecore 8.1 site and track the interaction with a goal in xDB. Oh yes, and do it fast.

Social Connected

Our first thought was using the social buttons provided by Sitecore (in 'social connected'). But, we bumped into some issues (well, actually just not enough options) and had to write quite some button-code ourselves.

AddThis

So we started looking for alternatives and got back to a tool which we had used before and was known to our customer : AddThis. Problem was that it is not integrated within Sitecore and therefor did not create a goal. After discussing pros and cons we went for the flexibility of AddThis and started writing the code to trigger a goal.

Trigger a goal in a MVC controller

Some people have already blogged about not being able to get to the current Tracker from within WebApi ..  With SSC (Sitecore.Services.Client) it should be possible - as Mike Robbins has shown:

Creating contacts in xDB from a Windows #IoT kiosk application using #Sitecore.services.client https://t.co/dhB93HMoe6

— Mike Robbins (@Sobek85) February 3, 2016

but as we did not have that information yet and we could not afford to take any risks, we went for the solution that seemed easy: create a mvc controller and a HttpPost action.

The controller action

[HttpPost]
public ActionResult TriggerGoal(string goal)
{
 if (!Tracker.IsActive)
 {
  return Json(new { Success = false, Error = "Tracker not active" });
 }

 if (string.IsNullOrEmpty(goal))
 {
  return Json(new { Success = false, Error = "Goal not set" });
 }

 var goalItem = ... // get goal item from Sitecore based on goal string
 if (goalItem == null)
 {
  return Json(new { Success = false, Error = "Goal not found" });
 }

 var visit = Tracker.Current;
 if (visit == null)
 {
  return Json(new { Success = false, Error = "Current tracker is null" });
 }

 var page = Tracker.Current.Session.Interaction.PreviousPage;
 if (page == null)
 {
  return Json(new { Success = false, Error = "Page is null" });
 }

 var registerTheGoal = new PageEventItem(goalItem);
 var eventData = page.Register(registerTheGoal);
 eventData.Data = goalItem["Description"];
 eventData.ItemId = goalItem.ID.Guid;
 eventData.DataKey = goalItem.Paths.Path;
 Tracker.Current.Interaction.AcceptModifications();

 Tracker.Current.CurrentPage.Cancel(); // Abandon current request so that it doesn't appear in reports

 return Json(new { Success = true });
}

We try to find the goal (Sitecore item) based on the post parameter. If found, we use that data to register a PageEvent to the PreviousPage of the current Tracker. We end by 'saving' the changes and cancelling the current request. The return values are an indication of what happened.

Remember:  Do not forget to register the route to your controller... ;)

The javascript

(function(global){

 var jQuery = global.jQuery;
 var addthisComp = {
  $instance: null,
  
  init: function(){
   addthisComp.$instance = jQuery('.addthis_sharing_toolbox');
   if(addthisComp.$instance.length){
    
    // Listen for the ready event
    if(global.addthis){
     if(global.addthis.addEventListener) 
          global.addthis.addEventListener('addthis.menu.share', addthisComp._share);
    }

   }
  },

  // Dispatched when the user shares
  _share: function(evt) {
      jQuery.ajax({
    type: "POST",
    url: '...', // url - route to your controller action
    data: {"goal": evt.data.service},
    success: function(obj){ 
    },
    dataType: 'json'
   });
  }
 };

 global.addthisComp = addthisComp;
   jQuery(document).ready(function(){
     global.addthisComp.init();
 });

})(window);

This is just attaching an ajax post request to out controller when the share functions of addthis are used. Of course, the post action could be attached to any event you want..