Skip to main content

Setting up Orion to work with Connatix

Below you will find the steps in order of how they should be completed with links to the sections below going into more detail.

Steps

  1. Have the module enabled
  2. Update Bootstrap Code
  3. Add Player Event Listener
  4. Spiny Team Review

Have the module enabled

Please let the Spiny team know before proceeding so we can enable this integration's module for your bundle. Once enabled you can proceed with this integration.

Update Bootstrap Code

In order to ensure Connatix impressions are counted by Spiny please update your bootstrap code in accordance with the following:

  1. Add the just-in-time minified code for Connatix. This code will setup the preliminary event listeners Orion needs to capture events prior to Orion loading into the page before Orion's internal event listeners can take over.
<!-- Spiny.ai Orion Bootstrap START --->
<script>
// Add the Orion just-in-time bootstrap code for Connatix
(function(c,a,p,t,u,r,e){c[a]=c[a]||{},c[a][p]=c[a][p]||[],c[a][t]=c[a][t]||function(x){var y=[];c[a][p].push(function(){for(var i=0;i<y.length;i++){var n=y[i][0],f=y[i][1];x[r[1]].apply(x,[n,f])}c[a][t](x)});var ev=Object.values(x[e]);for(var i=0;i<ev.length;i++){var v=ev[i],f=function(){var ar=arguments;console.log("bootstrap video event detect",v,ar);c[a][p].push(function(){c[a][u].apply(c[a][u],[x,v].concat(ar))})};x[r[0]](v,f),y.push([v,f])}}})(window, "orion", "queue", "wrapConnatixVideo", "delegateConnatixVideoEvent", ["on", "remove"], "configEvents");
// ...rest of bootstrap code
</script>
<!-- Spiny.ai Orion Bootstrap END --->

Add Player Event Listener

When making the call to setup the Connatix player on page update your player render call to the following:


cnxps({ playerId: "<PLAYER_ID>" }).render("<RENDER_ID>", function(err,api){
if(!err){
orion.wrapConnatixVideo(api);
}
});

Replace the values <PLAYER_ID> and <RENDER_ID> with the corresponding IDs you have from Connatix.

Spiny Team Review

Once completed please add these changes to a staging site for our team to confirm and once approved please deploy the changes to your production environments.