Custom integration guide

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 :

• The Snowplow Javascript browser tracker
• The Snowplow Javascript tag-based tracker

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 :

Will depend of the supported event types :

• EcommercePlugin() for Add Product To Cart (see https://docs.snowplow.io/docs/collecting-data/collecting-from-own-applications/javascript-trackers/browser-tracker/browser-tracker-v3-reference/plugins/ecommerce/)
• ConsentPlugin() for Consent Validation (see https://docs.snowplow.io/docs/collecting-data/collecting-from-own-applications/javascript-trackers/browser-tracker/browser-tracker-v3-reference/plugins/consent/) |

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 :

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 :

• With Browser tracker :

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

// ...

trackPageView({ title: 'my page title' });

• With Javascript (tag) tracker :

<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 :

• With Browser tracker :

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

// ...

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

• With Javascript (tag) tracker :

<script type="text/javascript">

	// ...

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

</script>

Send a Consent Validation :

• With Browser tracker :

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

// ...

trackConsentGranted({
	id: '1234'
});

• With Javascript (tag) tracker :

<script type="text/javascript">

	// ...

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

</script>