OM Documentation Extending

How to Show a Campaign After Video Has Ended

You can easily show a campaign after video play using Javascript and our MonsterLink feature.

In this article, you’ll learn how to show a campaign after a video has ended.

Before You Start

Here are some things to know before you begin:

  • MonsterLinks require a Pro or higher subscription.
  • This guide will only function with HTML5 Videos, it is not possible to use this with Flash video.
  • Need help creating your HTML5 Video Embed Code? Check out the Video for Everybody Generator for assistance.
  • Due to the advanced nature of this guide, at this time we do not provide technical support for implementing any portion of this guide.

Add MonsterLink

To show a campaign after a video finishes playing, follow these steps:

Add MonsterLink
  1. To begin, create and add a MonsterLink to your site following our guide.
  2. Next, you’ll edit the MonsterLink by adding some CSS to visually hide it from visitors. For example:
<a id="manual-optin-trigger" href="https://app.monstercampaigns.com/c/h95qqg9sqx9atrsl/" target="_blank" style="display:none;"></a>

Self-hosted HTML5 Video

If you’re self-hosting your HTML5 video, add the following Javascript to the footer of your site to trigger the MonsterLink when the video ends:

<script type="text/javascript"> 
    document.querySelector('video').addEventListener('ended', function( evt ) { 
        document.getElementById('manual-optin-trigger').click(); 
    }); 
</script>

YouTube Video

If you’re using a YouTube video you can use the YouTube API following these steps:

Get the YouTube embed iFrame

  1. Follow these instructions for getting the embed iFrame.
  2. Next, add ?enablejsapi=1 to the end of the src url.
  3. Finally, add an id attribute to the iFrame, id="player", for example: 
    <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/jbP9C9bQtv4?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Now that you have the embed iFrame in place, add the following JavaScript to the footer of your site:

<script type="text/javascript"> 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScript = document.getElementsByTagName('script')[0]; 
    firstScript.parentNode.insertBefore(tag, firstScript); 
    function onYouTubeIframeAPIReady() { 
        new YT.Player('player', { 
            events: { 
                'onStateChange': function(evt) { 
                    if (evt.data === YT.PlayerState.ENDED) { 
                        document.getElementById('manual-optin-trigger').click(); 
                    } 
                 } 
             } 
        }); 
    } 
</script>