Kits

With the exception of “webhook” style integrations that accept raw JSON in mParticle’s batch format, almost all web integrations require a client-side kit. If you use the snippet, the process of fetching these client side kits is handled for you automatically when you enable an integration in the mParticle UI.

If you are self-hosting, you will need to manually add each new integration to your source code before you can successfully enable the integration. You can find a full list of kit packages by searching npm for @mparticle.

mParticle supports several kinds of client-side kits:

• mParticle-hosted kits that mParticle has developed and fully supports.

• Partner-hosted kits that have been tested and are fully supported by mParticle:

  • CleverTap
  • Singular
  • Branch
• Sideloaded kits, also called custom kits, that have not been tested and are not support by mParticle. You are responsible for any sideloaded kit that you write yourself or include from a third-party source. This responsibility includes the correct handling and protection of user profiles and identities both within your own system as well as any third-party service you may forward that data to. Be especially cautious with sideloaded kits you may find from third-party repositories. They will potentially receive all events that you log via the mParticle SDK, so you are responsible for ensuring that they handle that data correctly and safely.

NPM Web-Kit Package Names

While most of the mParticle-hosted web-kits have been developed internally and so follow a similar npm naming format (@mparticle/web-PARTNERNAME-kit), we encourage partners to develop kits as well. These partner-built kits will not have the same naming convention. Please ensure to double check the npm package names below to ensure you install the proper kit:

Determining Which Partner SDK Version is Being Used By a Kit

The types of questions most users have about kits are:

• What version of the partner SDK do you “support”?
• Which version of a partner’s SDK does a given app/SDK version “use”?

These are two different questions. mParticle defines “support” as - if you can build an app/site with the mParticle SDK and the app compiles, it’s supported.

Therefore, we do not manually test every single version of every single kit.

We only verify that they compile. If the partner breaks their SDK, or our integration with it, it’s possible that we will not know it.

If a partner breaks their SDK/our integration, it typically means they’ve also broken anyone who is directly integrating.

Find the Kit Source Code

The vast majority of customers are on the “latest” version of our Web SDK at all times. Note that these days are numbered as we prepare to officially support “self hosting”.

In the meantime, this means our releasing scheme and tagging scheme doesn’t really apply here. As of 6/11/19, to determine the version of a partner’s SDK for a given web kit as follows:

1. Navigate to the mParticle Integrations Github org.
2. Find the repository of the partner. We use a naming convention - all Web SDK kits are named mparticle-javascript-integration-<PARTNER>.

Determine the Version

CDN-based

• Most kits will have a top-level .js file, such as “Optimizely.js”
• All kits will implement, somewhere in their source, an “initForwarder” API. This is where our kit will pull down a partner’s SDK
• As in this example, we are pulling down the “latest” of the Optimizely SDK:

initForwarder: function(settings, testMode, userAttributes, userIdentities, processEvent, eventQueue, isInitialized) {
  ...
  var optimizelyScript = document.createElement('script');
  optimizelyScript.type = 'text/javascript';
  optimizelyScript.async = true;
  optimizelyScript.src = 'https://cdn.optimizely.com/js/' +  settings.projectId + '.js';

Bundled

Some kits are “compiled” and we will bundle the source code of the partner’s SDK with our kit and distribute it over our CDN.

Bundled - NPM

In some of these cases (Braze), we will pull in their SDK over NPM, and you can tell which version that is by looking at the package.json of the kit, as in this example.

These dependencies work similarly to Cocoapods and Carthage above, you can read the full package.json version resolution docs here

Bundled - Manual

In other cases (Adobe), we will actually manually bundle the partner’s SDK in our repository. We don’t have a set pattern for doing this, so you’ll have to manually interpret it.

• If you locate the source of the partners SDK, the version will be in the source code
• We will include the version that we are using in the commit message that made the change
• See the Adobe example here

Hard Reloading Browser to Test Changes

When making changes in the mParticle UI such as adding or removing integrations (aka kits) or changing kit configurations, the configuration is cached for up to five minutes in our CDN layer, and is cached by the web browser for one hour. If you are testing configuration options, make sure to hard refresh your browser to clear the client-side cache after approximately 5 to 10 minutes to see the new changes.

In Chrome, this is done by pressing Ctrl + F5 on Windows and Cmd + Shift + R on Mac. Other browsers may use different key combinations.

Sideloaded Kits (Custom kits)

Kits are generally added and configured via the mParticle UI settings. When initializing the app, the mParticle SDK receives the configuration settings from our servers and initializes each kit. When you send events to the mParticle Web SDK, they are routed to each kit and mapped to a partner SDK method, ultimately arriving in our partners’ dashboards for your analysis. The kits in our UI are either built by mParticle or by partners. When partners build kits, we require careful coordination and updates to our database in order for their kits to work properly within our ecosystem.

However, there may be cases where you’d like to build a custom kit, whether to debug or to quickly send data to a partner SDK for which we do not have an official kit. We support the ability to build your own kit which can receive events without needing any configuration in our UI or database. We call these sideloaded kits. When sideloaded kits are included in your app, they remove the need for settings from our server because you configure the kit yourself and then include it using a public API we provide.

Important Safety Warning

Remember that while mParticle fully supports all official kits located in the “mparticle-integrations” GitHub organization as well as official kits created by our partners, you are responsible for any sideloaded kit you write yourself or include from a third-party source. This responsibility includes the correct handling and protection of user profiles and identities both within your own system as well as any third-party service you may forward that data to.

Be especially cautious with sideloaded kits you may find from third-party repositories. They will potentially receive all events that you log via the mParticle SDK, so you are responsible for ensuring that they handle that data correctly and safely.

Critical Limitations

Keep in mind that sideloaded kits are completely client-side, so things like data filtering are configured client-side and these options will not be available in the mParticle dashboard. This also means that event forwarding and filtering metrics from sideloaded kits will not be included in the metrics displayed in the mParticle dashboard as they would for official kits.

Our official support channels will be unable to help with issues you may have with your sideloaded kit such as data unavailable downstream, crashes, or unsupported functionality. mParticle support will only be able to help in cases where there is an issue with the mParticle SDK sideloaded kit feature in general.

Developing a Sideloaded Kit

The process of creating a sideloaded kit for the web SDK is very similar to creating a partner kit. To get started, you can clone the example kit and follow the instructions for creating a kit. There are a few differences to highlight:

• All configuration settings are handled in the code you write in the sideloaded kit as opposed to receiving any settings from our servers.
• You do not need a kit ID, and you don’t need to work with the mParticle team at all. You develop a sideloaded kit completely independently.
• You do not need to publicly host the kit on NPM (though you can if that serves your use case). The code can live on your servers and be imported into your app.

Including the Sideloaded Kit

Any sideloaded kits you develop will need to be included in your app. Sideloaded kits require a self-hosted version of mParticle to work properly.

NPM Set up

After building your sideloaded kit using our kit builder, the dist folder will have a file ending in common.js which you will use in the NPM set up. First import the common.js kit file and then add it to the sideloadedKit API:

import mParticle from '@mparticle/web-sdk';
import SampleSideloadedKit from '/path/to/sample-kit.common.js';

// Wrap your sideloaded kit in an MPSideloadedKit class and add it as a property
// to the mParticleConfig before initialization
const customMPSideloadedKit = new mParticle.MPSideloadedKit(SampleSideloadedKit);
const mParticleConfig = {
  // other config properties
  sideloadedKits: [SampleSideloadedKit]
};

mParticle.init('apiKey', mParticleConfig)

Another option is to reference the NPM package in your package.json file directly and import the package name instead of the package path. In our Higgs Sample App, we store the SampleSideloadedKit NPM package within our file directory and reference it in our package.json so that we can import it via its package name in our app.

Filtering Data

mParticle allows customers to easily filter out events, attributes, or identities from our official kits via the mParticle UI. For sideloaded kits, because there is no UI component, we provide the same filtering functionality via an easy-to-use API:

// After creation of the customMPSideloadedKit from the above sample

// Filter out all events of a specific Event Type
customMPSideloadedKit.addEventTypeFilter(mParticle.EventType.Unknown);

// Filter out a specific Event Name for specific Event Type
customMPSideloadedKit.addEventNameFilter(mParticle.EventType.Navigation, 'Test Event');

// Filter out specific Event Attributes
customMPSideloadedKit.addEventAttributeFilter(mParticle.EventType.Navigation, 'Test Event', 'testAttr1');

// Filter out specific screen names (page views)
customMPSideloadedKit.addScreenNameFilter('Test Screen Name');

// Filter out specific screen attributes (page view attributes)
customMPSideloadedKit.addScreenAttributeFilter('Test Screen Name', 'testAttr1');

const mParticleConfig = {
  // other config properties
  sideloadedKits: [SampleSideloadedKit]
};

mParticle.init('apiKey', mParticleConfig)