.png%3Falt%3Dmedia%26token%3D6deff902-b475-4b95-bffc-b313f43260b5)
.png%3Falt%3Dmedia%26token%3D6deff902-b475-4b95-bffc-b313f43260b5)
Tracking Widget Interactions on Tealium
Tealium is an Enterprise Grade Tag Management solution designed to simplify the process of managing marketing and tracking tags.
Featuring an ecosystem of over 1,000 Analytics, Personalization and Engagement tools that it seamlessly integrates with, Tealium offers a scalable solution for Enterprise customers to not only manage Tag requirements, but a central point for events and triggers to be sent to and then dispersed.
Within this guide, we will use Visual UGC’s Javascript API to send specific events to Tealium’s Tag Management offering, which then can be passed onto tools like Adobe Analytics, Krux, Google Analytics and Piwik.
iQ Tag Manager is Tealium’s Enterprise Tag Management solution designed to simplify the process of managing marketing and tracking tags.
In this example we will need to do the following:
- Use the Global Widget Events API to find out what data Visual UGC Widgets make available for the user interactions that we choose to track.
- Use Tealium’s event tracking methods to send some of this data to the Tealium iQ Tag Manager
Today we’ll work with two:
tileExpand- triggered when a user clicks a Tile to view it in a lightboxproductActionClick- triggered when a user clicks a “Buy” button on a Tile (Social Commerce feature)
First we’ll look at what data these events makes available, then we’ll configure our Widget to send these interactions to Tealium when a user triggers these events.
To start, we’ll crack open the Custom Code Editor on our Widget, switch to the Expanded Tile tab and add the following code.
Adding this code in the Expanded Tile JS editor instead of directly on the parent page means Visual UGC will load this code for us when
Stackla.WidgetManager global variable is available, avoiding the need to check and re-check for this variable before executing our code.Stackla.WidgetManager.on('tileExpand', function (e, data) {
// Log all the available data to the console
console.log(data);
});
With this, we’ll get a dump in the console of all the data associated with the
tileExpand event that Visual UGC makes available.This data is contained inside an aptly named data object. Let’s fetch some stuff from there and send it to Tealium Tag Manager.
To send Event Data to Tealium, we are going to use utag.link()method to pass information to Tealium.
This particular method tracks non-page views, page interactions, and other dynamic events that might occur on a page. Calling this method will trigger the corresponding event tracking functionality within your configured vendor tags.
Note: It is assumed for this guide, the page which will have the Visual UGC Widget installed will also have the Universal Tag (utag.js) already installed. This Javascript file must be present in order for the utag.link() method to work.
Now the standard structure for a
utag.link() call is as follows:utag.link(data_object, callback, [uid_array]);
data_object (Object) is the specific tracking call we want the event to be associated with, callback (Function) is the function that needs to be executed after the tracking call has completed, whilst uid_array (Array) is the specific Tag ID values we want to send back to the relevant vendor.All of the above attributes are of course optional.
So for our examples, in the first event, the information we will possibly want to send across will include the likes of Widget ID, Filter ID, Tile ID and of course associate all these with an event titled something like ‘TileExpand’. As such the code we would want to add to our Widget would be very similar to the below:
Stackla.WidgetManager.on('tileExpand', function (e, data) {
utag.link({
"event_name" : "TileExpand",
"widget" : [ data.widgetId ],
"filter" : [ data.filterId ],
"tileid" : [ data.tileData._id.$id ],
"media" : [ data.tileData.media ],
"source" : [data.tileData.source]
});
The above would sent all the values we defined above, plus we’ve thrown in Source and Media just for good measure.
Now because we don’t need to generate any function post this Event being trigger, we’ve only define the
data_object (event_name) and the relevant uid_array tags.The next event we may wish to track is the
productActionClick. For this one, the types of values we will want to track will include the Product SKU and then apply it to the Google Analytics structure.ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject])
As such, we would want to send something like the below:
Stackla.WidgetManager.on('ProductActionClick', function (e, data) {
utag.link({
"event_name" : "ProductActionClick",
"eventCategory" : [ "Widget: (" + data.widgetId + ")" ],
"eventAction" : [ "Filter:" data.filterId + ")" ],
"eventLabel:" : [ "SKU:" data.productTag.ext_product_id ]
});
Of course, this assumes we want to keep a similar naming convention, however one of the strengths of Tealium, is you can of course custom map any values to any Vendor tag attributes.
By leveraging the events and data made available by the Global Widget Events API we can send data to Tealium.