Example - Track Custom Events

This example describes how you would use the MXO Javascript methods to track an event programatically from within your Javascript logic, where the MXO Tag would not be able to capture the customer event, by default.

For example, where a customer chooses a value using a slider control.

Process

To trigger Activity Capture Points from custom Javascript code, you need to:

  1. Create an Activity Capture Point.
  2. Customize the MXO Tag to trigger the Activity Capture Point.
  3. Update your custom Javascript widget to call the global callback, when appropriate.

Step 1: Create an Activity Capture Point

In MXO, create an On click or tap Activity Capture Point for the Interaction Point containing your custom Javascript widget.

Select the Proposition and Activity type, as usual.

When entering the element path, provide a unique string to identify this as a Activity Capture Point that will be used programmatically, instead of providing the usual HTML identifier. The string does not need a special format because we will set up an exact-match comparison in the custom MXO Tag to find it. In our example, we use "custom-slider" as the unique string.

Note: We recommend using specific naming conventions when creating custom points. For example, by adding the prefix "custom-" to the custom event path.

Step 2: Customize the MXO Tag to trigger your Activity Capture Point

To trigger your Activity Capture Point, you must customize the MXO Tag.

Edit the MXO Tag to search for Activity Capture Points that have the path you configured in Step 1. When you find a matching Activity Capture Point, expose a callback to trigger the custom tracking event. In our example, we will create a global object, windows.ONESDK, and add the callback function to that. 

 // Call to MXO for any optimizations for the Interaction Point provided. customerApi.sendInteraction(defaults.interaction, defaults.properties).then (function (response) { // If there are trackers in the response, search for ones that have // the paths we set up to indicate they should not be looked up on // the DOM, but programmatically exposed. if (response.trackers) { var indexesOfTrackersToRemove = []; $.each(response.trackers, function( index, tracker ) { // If we find a tracker with our special path value, add a // global object to provide a callback that external javascript // functions can call. if (tracker.path === 'custom-slider') { // Save index to remove tracker from list to process later. indexesOfTrackersToRemove.push(index); window.ONESDK = window.ONESDK || {}; ONESDK.trackers = ONESDK.trackers || {}; ONESDK.trackers.customevent = tracker.id; // The interaction Point that the Activity Capture Point is on. ONESDK.interaction = defaults.interaction; // Reference to the API for calling back into MXO. ONESDK.api = customerApi; // The callback function that triggers the tracking event. ONESDK.onCustomEvent = function() { var props = {}; props[ONESDK.trackers.customevent] = ''; ONESDK.api.sendProperties(ONESDK.interaction, props); }; } }); // Do not process trackers that have our non-DOM paths. // Otherwise they will trigger warning messages in the Monitor. var i; for (i = 0; i < indexesOfTrackersToRemove.length; ++i) { response.trackers.splice(indexesOfTrackersToRemove[i], 1); } } // Default response processing logic for sendInteraction. customerApi.processResponse(response); });
Note: Our example is heavily commented to provide you with any notes you may need. Custom MXO Tag code does not get minified or stripped of comments, so in production you may want to remove those comments.

Step 3: Update your Custom Javascript Widget

After the one-tag.js is loaded into your page and the Activity Capture Point is processed, the callback created in Step 2 ,`window.ONESDK.onCustomEvent()`, will be available. Simply call that function to process your custom tracking event.
Note: You must ensure that any custom code is included in your ongoing testing cycles.
 $(document).ready(function(){ // In your widget's event handler, trigger the callback for the Activity Capture // Point, if available. $('.someWidget).on('change', function( if (window.ONESDK && ONESDK.onCustomEvent) { ONESDK.onCustomEvent(); } }); });