mini-vodacom-adobe-analytics v1.0.10

Mini AdobeAnalytics

A Node.js module which eases the use of Adobe Analytics inside a Mini Program.

Install

npm install mini-vodacom-adobe-analytics

Setup

Inside app.js of your Mini Program import the AdobeAnalytics object then attach it as a property value to the global object:

import { adobeAnalytics } from 'mini-vodacom-adobe-analytics';

App({
  adobeAnalytics,
  onLaunch(options) {
    //...
  },
});

You can configure the options for AdobeAnalytics inside adobeAnalyticsConfig.json found in the src directory:

{
  "appTag": "MyMiniAppName",
  "enableTracking": true,
  "serverURL": "https://s.metric.vodacom.co.za",
  "serverAPI": "b/ss/vodacomdlsvodacomfinancialservicesdev/6",
  "reportSuiteID": "vodacomdlsvodacomfinancialservicesdev",
  "proxies": [
    {
      "method": "downloadFile",
      "events": ["UI_INTERACTION"]
    }
  ]
}

Options can also be configured dynamically using the setOptions method:

getApp()['adobeAnalytics'].setOptions({
  appTag: 'NewAppTag',
  enableTracking: false
});

Event Listening

There are a few router events that adobeAnalytics will listen for out of the box:

• switchTab
• navigateTo
• reLaunch
• redirectTo

To attach listeners on the UI, firstly you'll need to configure the Selectors object found in src/selectorsConfig.js. List the element to listen for on interaction as a property and the value will be an array of events to fire on interaction:

// You can identify the element to watch as a query selector

const Selectors = {
  '#complete-order': [adobeAnalyticsEvents.TRANSACTION_PENDING],
  '.specific-button': [adobeAnalyticsEvents.CAMPAIGN_EXTERNAL_EVENT_CLICK],
  '.card': [adobeAnalyticsEvents.ADD_CARD_SUCCESS],
  '.button-container': [adobeAnalyticsEvents.UI_INTERACTION]
};

Inside the the js file of the page where the UI elements live, just call the pageListener method from the analytics object with the event object as a parameter:

Page({
  //...
  pageListener: (e) => getApp()["adobeAnalytics"].pageListener(e)
});

Finally inside the axml file you'll need to attach an onTap listener on the root element:

<view onTap="pageListener">
  <!-- Some page content goes here -->

  <button id="complete-order">Complete Order</button>
</view>

Note: for custom components (that don't provide prop values with access to id or class attribute) you'll need to wrap the component around an element and list the wrapping element inside the Selectors object.