Skip to main content

Setting up Orion to work with YouTube

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. Include the YouTube Iframe API Script
  4. Update Player Instantiation
  5. Update Embed Code
  6. 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​

Important

The "message" event listener only needs to be setup once per page. If you've implemented the below event listener for another integration you do not need to take any steps for this section.

To integrate and track YouTube videos with Orion please update your bootstrap code and YouTube embeds in accordance with the following:

  1. Add "trackMessageEvent" to the orionMethods array.
  2. Add the message event listener shown in the code snippet below(only needs to be implemented once per page not per integration)
<!-- Spiny.ai Orion Bootstrap START --->
<script>
    // Add "trackMessageEvent" to orionMethods
    var orionMethods = ["init","registerPost","report","newPageView","setContext", "trackMessageEvent"];

    (function(s,p,i,n,y){s[i]=s[i]||{queue:[]};for(var x=0;x<n.length;x++){(function(m){s[i][m]=s[i][m]||function(){var a=arguments;s[i].queue.push(function(){s[i][m].apply(s[i],a)})}})(n[x])}if(y){var e=p.createElement("script");e.type="text/javascript";e.async=true;e.src=y;var f=p.getElementsByTagName("script")[0];if(f){f.parentNode.insertBefore(e,f)}else{var d=p.getElementsByTagName("head")[0];if(d){d.appendChild(e)}}}})(window,document,"orion",orionMethods,null);

    // Add this message event listener
    window.addEventListener("message", orion.trackMessageEvent);
    
    orion.init(...)
</script>
<!-- Spiny.ai Orion Bootstrap END --->

Integrating with YouTube​

Include the YouTube Iframe API Script​

NOTE: This is required regardless of using Iframe embeds or loading videos via the JavaScript API.

To allow reporting you will need to reference the YouTube Iframe API script on page. Preferably prior to the player loading in.

To do so you can render the following script when initializing YouTube videos.

<script src="https://www.youtube.com/iframe_api"></script>

or

<script>
    
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

</script>

Update Player Instantiation​

If you instantiate YouTube players via JavaScript you will need to update your YouTube implementation with Orion's wrapYT method. Example below.

note

Through unofficial means Orion does track YouTube player creation provided enablejsapi(see below) is set and the message event listener(see above) is. However due to the nature of unofficial integrations they could be prone to breaking so we recommend covering officially supported tracking by explicitly passing the YT.Player instance to Orion via the following snippet(s).

<div id="player"></div>
<script>
    // From YouTube implementation Docs

    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            playerVars: {
                'playsinline': 1
            }
        });

        // Orion specific integration
        orion.wrapYT(player);
    }
</script>

This will allow Orion to register your player instance and perform all necessary reporting. This will need to be performed for each YouTube video.

Update Embed Code​

If you're using embeds you will need to pass the ID of the iframe generated by the embed to Orion once content has loaded in.

Below is the standard embed code.

<iframe 
    width="1280"
    height="720" 
    src="https://www.youtube.com/embed/bHQqvYy5KYo" 
    title="Google I/O 2011: YouTube&#39;s iframe Player: The Future of Embedding" 
    frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" 
    allowfullscreen>
</iframe>

You will need to add an ID to the embed code. Once an ID is added you can pass that ID to Orion to wrap.

<iframe 
    id="yt-player-1"
    width="1280"
    height="720" 
    src="https://www.youtube.com/embed/bHQqvYy5KYo?enablejsapi=1" 
    title="Google I/O 2011: YouTube&#39;s iframe Player: The Future of Embedding" 
    frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" 
    allowfullscreen>
</iframe>

<script>
    orion.wrapYT('yt-player-1');
</script>

This will allow Orion to register your player instance and perform all necessary reporting. This will need to be performed for each YouTube video.

enablejsapi​

You can see in the code examples above we added ?enablejsapi=1 to the embeded iframe src url. This is required for YouTube to allow reporting on YouTube videos. Alternatively, you can add an attribute to the iframe enablejsapi and set the value to "true".

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.