.png%3Falt%3Dmedia%26token%3D6deff902-b475-4b95-bffc-b313f43260b5)
.png%3Falt%3Dmedia%26token%3D6deff902-b475-4b95-bffc-b313f43260b5)
Tracking interactions with Sitecore Analytics
Sitecore is one of the leading Digital Experience Platforms (DXP) in the market, providing a platform for client to deliver personalised, relevant and engaging experiences to their end-customers.
As one of the leading DXP's in the market, Visual UGC not only has a strategic partnership with Sitecore, but offers a plugin making it easy for anyone to quickly add User Generated Content via the Sitecore Experience Editor.
Whilst the plugin is great for quickly deploying Widgets as renderings, customising content using the Sitecore personalisation engine, and even feeding back information for the Sitecore xDB, there are more ways in which Visual UGC and Sitecore can work together.
In this guide we are going to look at how we can use Visual UGC's Global Widget Events API and Sitecore's FXM Javascript API to send interaction information to Sitecore Analytics.
Now before we begin, it is important to note that the Visual UGC Widgets on Sitecore, still remain hosted on Visual UGC, as such, any interactions on the In-Line tile are treated as coming from an external, non-Sitecore website for the purposes of Analytics. As such, in order to track successfully on Sitecore, we need to leverage the Federated Experience Manager.
As such, before we begin adding any code to our Widgets, we will need to ensure that the domain widgets.stackla.com is added to your FXM.
Once this has been done, we should be generated our Sitecore Beacon, which we can use to send interaction information back to our Sitecore instance. Back to Top
Sitecore's FXM Analytics Javascript API offers 3x standard functions which a Customer can register an event against. These functions are:
trackEvent- Function to trigger a Sitecore page eventtrackGoal- Function to trigger a Sitecore goaltrackOutcome- Function to trigger a Sitecore outcome
Now for the purpose of this guide, we are going to use the
trackEvent function to track when a user Expands a Tile on a Widget.Now to send information to Sitecore from the Visual UGC Widget, we are going to leverage the Global Widgets API to instigate the Sitecore FXM Analytics Javascript function.
To start, we will use the Global Widget API Event Type,
TileExpand. This event type fires whenever someone clicks on an Inline Tile and thus opens the Expanded Tile. We are going to store this event within Sitecore as the Page Event Tile Expand, so to begin with we will need to define this Event Type in our Sitecore instance.To do this, we will go to Content Editor and from the tree we will select Sitecore > Settings > Analytics > Page Events and add a new Page Event titled Tile Expand
From here, we can now go and configure our Widget. Going into our Custom Code editor, and selecting Expanded Tile, we can insert the below into the Custom Javascript:
Stackla.WidgetManager.on('tileExpand', function (e, data) {
SCBeacon.trackEvent('Tile Expand');
});
This will send to Sitecore a Tile Expanded event, however it naturally will not contain much more detail than that, as such, we can look to expand the code to now include other attributes such as Widget ID (
data.widgetId), Filter ID (data.filterId), Tile ID (data.tileData._id.$id), Tile Media Type (data.tileData.media), Tile Source Network (data.tileData.source) and the Tags associated with the Tiles (data.tileData.tags). To do this we would update the code to the below:Stackla.WidgetManager.on('tileExpand', function (e, data) {
SCBeacon.trackEvent('Tile Expand', { data: 'StacklaData', dataKey: 'DataKey', xWidget: data.widgetId, xFilter: data.filterId, xTileID: data.tileData._id.$id, xMedia data.tileData.media, xSource: data.tileData.source, xTags: data.tileData.tags });
});
Now it is important to remember, when using the Sitecore FXM Analytics Javascript API, that we always prefix our custom parameters with an x.
Assuming this has been done correctly, when this event is triggered, you should see the following information logged on your Sitecore instance in the database:
Name- Tile ExpandData- StacklaDataDataKey- DataKeyText- Widget=data.widgetId&Filter=data.filterId&TileID=data.tileData._id.$id&Media=data.tileData.media&Source=data.tileData.source&Tags=data.tileData.tags
Once we can effectively send interaction data back to Sitecore, we can then start to track Goals, Outcomes and build out our Personalisation database on our Sitecore instance.