Guides
Splio Customer PlatformMobile Wallets

Javascript Snowplow Libraries

For a custom integration, you will be able to use one of the numerous existing opensource Snowplow trackers. They all produce the web tracking events in the same format, supported by the Splio CDP tracking endpoint.

The two recommended Snowplow trackers are :

They are both frontend trackers and have very similar features.

⚠️

Any tracker compatible with the Snowplow event format should be supported, but only these two have been tested and are officialy supported in Splio CDP Web tracking endpoint

Configuration with the Browser Tracker

You can follow the standard Snowplow tracker documentation to integrate it in your website or in your tag manager solution. The Browser tracker is a standard npm module (npm install @snowplow/browser-tracker)

⚠️

Examples are given in Typescript.

Note that their is no dependency on Typescript or on any frontend technology (React, Angular, Vue, JQuery …) in the standard Snowplow Browser tracker

The tracker can be configured as this :

import {newTracker} from "@snowplow/browser-tracker";

/* ... */

newTracker(
	{TRACKER_ID}, 
	{TRACKER_URL},{
		appId: {APP_ID_FOR_TRACKER},
		discoverRootDomain: true,
		cookieSameSite: 'Lax', 
		plugins: [{PLUGINS}],
	}
)

With these configuration properties :

PropertyDetails
TRACKER_IDAn identifier for the tracker use (1 by site / tracker). Allows you to have multiple source of web tracking (for example with multiple ecommerce sites).
The supported values are defined together during integration project
TRACKER_URLSplio CDP endpoint url, compatible with various web tracker event protocols, including Snowplow.
Provided by your project manager during integration
APP_ID_FOR_TRACKERYour unique identifier, specified with the project manager
PLUGINSArray of enabled (Snowplow) plugins

Will depend of the supported event types :

The optional Global Contexts which can be integrated in any events are :

  • For product identification, define a context as this :
let productContext = {
	schema: 'jsonschema:com.splio/product/1-0-0',
	data: { productSKU: 'EAN15555-156676' }
};
  • For logged in user identification, define a context as this :
let userContext = {
	schema: 'jsonschema:com.splio/logged_user/1-0-0',
	data: { userid: 'aaaarrrrrpppppp', /* Optional */ sourceid: 'shopify' }
};

Then apply the global contexts as this :

import { addGlobalContexts } from "@snowplow/browser-tracker";

/* ...*/

addGlobalContexts([productContext, userContext /* ... */]);
⚠️

It is recommended to use **Global context** only, for simplicity of integration and consistency of contextual information which will be processed by the Splio CDP Predictive Engine

📘

For more details, you can request for the jsonschema of the contexts supported by Splio CDP

Configuration with the tag based javascript Tracker

The standard documentation will provide any details on tracker integration. Here are given the specific parameters required to integrate with the Splio CDP Web tracking endpoint.

⚠️

Examples here are given in javascript.

The Snowplow sp.js script and tag specification must have been set up

The tracker setup is :

snowplow('newTracker', {TRACKER_ID}, {TRACKER_URL}, {
	appId: {APP_ID_FOR_TRACKER},
	discoverRootDomain: true,
	cookieSameSite: 'Lax'
});

With these configuration properties :

PropertyDetails
TRACKER_IDAn identifier for the tracker use (1 by site / tracker). Allows you to have multiple source of web tracking (for example with multiple ecommerce sites)
The supported values are defined together during integration project
TRACKER_URLSplio CDP endpoint url, compatible with various web tracker event protocols, including Snowplow.
Provided by your project manager during integration
APP_ID_FOR_TRACKERYour unique identifier, specified with the project manager

To support “Consent Validation” event, add this setup (plugin “consent”) :

window.snowplow('addPlugin', 
	"https://cdn.jsdelivr.net/npm/@snowplow/browser-plugin-consent@latest/dist/index.umd.min.js",
	["snowplowConsent", "ConsentPlugin"]
);

To support “Add Product To Cart” event, add this setup (plugin “ecommerce”) :

window.snowplow('addPlugin', 
	"https://cdn.jsdelivr.net/npm/@snowplow/browser-plugin-ecommerce@latest/dist/index.umd.min.js",
	["snowplowEcommerce", "EcommercePlugin"]
);

The optional Global Contexts which can be integrated in any events are :

  • For product identification, define a context as this :
let productContext = {
	schema: 'jsonschema:com.splio/product/1-0-0',
	data: { productSKU: 'EAN15555-156676' }
};
  • For logged in user identification, define a context as this :
let userContext = {
	schema: 'jsonschema:com.splio/logged_user/1-0-0',
	data: { userid: 'aaaarrrrrpppppp', /* Optional */ sourceid: 'shopify' }
};

Then apply the global contexts as this :

window.snowplow('addGlobalContexts', [productContext, userContext /* ... */]);
⚠️

It is recommended to use Global context only, for simplicity of integration and consistency of contextual information which will be processed by the Splio CDP Predictive Engine

📘

For more details, you can request for the jsonschema of the contexts supported by Splio CDP

Sending events with the Browser tracker

Send a page view :

import { trackPageView } from '@snowplow/browser-tracker';

// ...

trackPageView({ title: 'my page title' });
<script type="text/javascript">

	// ...
	
	snowplow('trackPageView', { title: 'my page title' });

</script>

Reminder : For product identification and user identification, use Global Context for simplification

Send an Add Product To Cart:

import { trackAddToCart } from '@snowplow/browser-plugin-ecommerce';

// ...

trackAddToCart({
	category: 'gift',
	sku: '998889999', 
	name: 'my product', 
	quantity: 4,  
	unitPrice: 15.69,
	currency: 'EUR'
});
<script type="text/javascript">

	// ...

	snowplow('trackAddToCart', { 
		category: 'gift',
		sku: '998889999', 
		name: 'my product', 
		quantity: 4,  
		unitPrice: 15.69,
		currency: 'EUR'
	});

</script>

Send a Remove Product From Cart

import { trackRemoveFromCart } from '@snowplow/browser-plugin-ecommerce';

// ...

trackRemoveFromCart({
  category: 'gift',
  sku: '998889999',
  name: 'my product',
  quantity: 1,
  unitPrice: 15.69,
  currency: 'EUR'
});
<script type="text/javascript">

  // ...

  snowplow('trackRemoveFromCart', {
    category: 'gift',
    sku: '998889999',
    name: 'my product',
    quantity: 1,
    unitPrice: 15.69,
    currency: 'EUR'
  });

</script>
ℹ️

trackRemoveFromCart uses the same Ecommerce plugin as trackAddToCart and accepts the same parameters.


Send a Thank You Page View (post-purchase confirmation):

A Thank You Page View is a standard page view with a Splio thank_you_page context attached. It signals that the user has completed a purchase.

import { trackPageView } from '@snowplow/browser-tracker';

// ...

trackPageView({
  title: 'Thank You - Order Confirmed',
  context: [
    {
      schema: 'jsonschema:com.splio/thank_you_page/1-0-0',
      data: { purchase_completed: 'true' }
    }
  ]
});
<script type="text/javascript">

  // ...

  snowplow('trackPageView', {
    title: 'Thank You - Order Confirmed',
    context: [
      {
        schema: 'jsonschema:com.splio/thank_you_page/1-0-0',
        data: { purchase_completed: 'true' }
      }
    ]
  });

</script>
📘

The thank_you_page context can be combined with other contexts (e.g. logged_user) in the same event.

Send a Consent Validation :

import { trackConsentGranted } from '@snowplow/browser-plugin-consent';

// ...

trackConsentGranted({
	id: '1234'
});
<script type="text/javascript">

	// ...

snowplow('trackConsentGranted', {
	id: '1234'
});

</script>

Updated 7 days ago

Did this page help you?