Event

Adobe Target lets you optimize every experience every time with A/B testing. Learn more about Adobe Target here, and see below for how mParticle’s integration works.

Adobe Target Overview and Prerequisites

Currently mParticle supports Adobe Target v1.8. Note that you must host your instance of Adobe Target’s at.js file and load it before you load mParticle’s dynamic loading script. This is because Adobe Target’s at.js file is customized to each client and contains customized initialization code. Additionally, there are optional global functions such as targetPageParams, targetPageParamsAll, and targetGlobalSettings which can all be edited and included in the at.js script when edited in Adobe Target’s Dashboard at Setup > Implementation > Edit at.js Settings > Code Settings > Library Header

Once you have set up your global functions and hosted your at.js file, see below for an example of how to load both at.js and mParticle’s web sdk in your index.html file:

// index.html

// First load at.js
<script src="https://www.example.com/at.js"></script> // replace the URL in the script src here with the path to your hosted at.js file

// Second, load mParticle's web sdk snippet. This is identical to the snippet at https://docs.mparticle.com/developers/sdk/web/getting-started#add-the-sdk-snippet
<script type="text/javascript">
  window.mParticle = {
    config: {
      isDevelopmentMode: true //switch to false (or remove) for production
    }
  };

  (
    function(t){window.mParticle=window.mParticle||{};window.mParticle.EventType={Unknown:0,Navigation:1,Location:2,Search:3,Transaction:4,UserContent:5,UserPreference:6,Social:7,Other:8};window.mParticle.eCommerce={Cart:{}};window.mParticle.Identity={};window.mParticle.config=window.mParticle.config||{};window.mParticle.config.rq=[];window.mParticle.config.snippetVersion=2.2;window.mParticle.ready=function(t){window.mParticle.config.rq.push(t)};var e=["endSession","logError","logBaseEvent","logEvent","logForm","logLink","logPageView","setSessionAttribute","setAppName","setAppVersion","setOptOut","setPosition","startNewSession","startTrackingLocation","stopTrackingLocation"];var o=["setCurrencyCode","logCheckout"];var i=["identify","login","logout","modify"];e.forEach(function(t){window.mParticle[t]=n(t)});o.forEach(function(t){window.mParticle.eCommerce[t]=n(t,"eCommerce")});i.forEach(function(t){window.mParticle.Identity[t]=n(t,"Identity")});function n(e,o){return function(){if(o){e=o+"."+e}var t=Array.prototype.slice.call(arguments);t.unshift(e);window.mParticle.config.rq.push(t)}}var mp=document.createElement("script");mp.type="text/javascript";mp.async=true;mp.src=("https:"==document.location.protocol?"https://jssdkcdns":"http://jssdkcdn")+".mparticle.com/js/v2/"+t+"/mparticle.js";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(mp,c)}
  )("REPLACE WITH API KEY");
</script>

Supported Features

Adobe Target Feature Name	mParticle Supported?	Additional Comments
getOffer	Yes	---
getOffer success/error handlers	Yes	---
applyOffer	Yes*	applyOffer cannot be invoked directly via mParticle method calls. Instead it is invoked immediately upon success of a `getOffer` call
trackEvent	Yes	----

Event Tracking

All event mappings to Adobe Target requires a custom flag of ‘ADOBETARGET.MBOX’ at a minimum. Custom event attributes will be mapped to Adobe Target’s params object.

For example, to perform a basic track event call:

const customAttrs = {foo: 'bar'};
const customFlags = {
    'ADOBETARGET.MBOX': 'fooBox'
};

mParticle.logEvent('custom event name', mParticle.EventType.Other, customAttrs, customFlags)

will map to the following:

adobe.target.trackEvent({
    mbox: 'fooBox',
    params: {
        foo: 'bar'
    }
})

Similarly, you can track page views by passing custom flags to the mParticle.logPageView method.

Calling Adobe Target’s getOffer Method

The following custom flags call will map to adobe.target.getOffer.

Custom Flag	Type	Required?	Description
ADOBETARGET.GETOFFER	boolean	yes	Pass `true` in order to initiate a call to `adobe.target.getOffer`
ADOBETARGET.MBOX	string	yes	`mbox` name passed to Adobe Target’s getOffer method
ADOBETARGET.SUCCESS	function	no	mParticle automatically invokes `applyOffer`. You can pass any additional logic to process after `applyOffer` is invoked. This has a single argument which is the returned `offer`.
ADOBETARGET.ERROR	function	no	Pass any additional logic to to process inside of the `getOffer` error handler. This has 2 arguments, the `status`, and `error`

const customAttrs = {foo: 'bar'};
const customFlags = {
    'ADOBETARGET.MBOX': 'fooBox',
    'ADOBETARGET.GETOFFER': true,
    'ADOBETARGET.SUCCESS': successHandlerFunction,
    'ADOBETARGET.ERROR': errorHandlerFunction,
};

mParticle.logEvent('[Your Event Name]', mParticle.EventType.Other, customAttrs, customFlags)

will map to the following:

window.adobe.target.getOffer({
    mbox: MBOXNAME,
    params: customAttrs,
    success: function(offer) {
        window.adobe.target.applyOffer(offer);
        successHandler(offer); // optional
    },
    error: function(status, error) {
        errorHandler(status, error); //optional
    },
});

Order Confirmation Tracking

mParticle also maps product purchase events to Adobe Target. See below for an example of the mapping

const product1 = mParticle.eCommerce.createProduct('iphone', 'iphoneSKU', 1000);
const product2 = mParticle.eCommerce.createProduct('galaxy', 'galaxySKU', 800);

const taxes = 10;
const shipping = 5;
const total = 1815

const transactionAttributes = mParticle.eCommerce.createTransactionAttributes('TAid1', 'aff1', 'coupon', total, taxes, shipping)
const customFlags = {
  'ADOBETARGET.MBOX': 'mbox1'
}
mParticle.eCommerce.logProductAction(mParticle.ProductActionType.Purchase, [product1, product2], transactionAttributes, customFlags)

will map to the following:

adobe.target.trackEvent({
  mbox: 'fooBox',
  params: {
    orderId: 'TAid1',
    orderTotal: 1815,
    productPurchaseId: 'iphoneSKU, galaxySKU'
  }
})

Was this page helpful?