Integration with YouTube player

In SALESmanago it is possible to integrate various external events and to register contact activity on monitored websites. This information can be used to analyze consumer behaviour or other interactions between the company and its clients. One of the external event examples is playing a video embedded on a monitored website. User activity on videos is what we call the Video Body Language.

Short commercial videos are a profitable solution to support sales. The audiovisual form seems more attractive for the senses than plain text or simple images. A potential client will sooner watch an advertising film than read a press note. In the era of ever-present media, it is not easy to grab the people’s attention – that is why you need to communicate in the most efficient channels.

Thanks to SALESmanago you can integrate external events directly connected to playing the video available on your website. The Video Body Language Monitoring registers and displays contact actions on their contact cards, this includes:

  • loading a film,
  • playing It,
  • stopping It,
  • finishing It.

Having this information you can plan actions for contacts. Let us imagine a client finished watching the video and the system reacted. At this point the user can choose from the following options:

  • set up an automation rule which will add tags depending on the time when a contact finished watching,
  • plan complex workflow campaigns designed to move contacts with a particular tag to other stages in Sales Funnel campaigns,
  • educate contacts who opened and watched a film, but did not make a connected purchase. Thanks to the Lead Nurturing process, transform those contacts into the clients,
  • use dynamic emails to showcase products from a video, from the same category or even the video itself,
  • generate coupons for contacts who watched a video and made a purchase to encourage them to come back.

Learn which external events can be integrated and how to do it here>>.


How to integrate SALESmanago with YouTube player

In order to register and upload external events on contact cards, the website with the clip has to be monitored.

3

To embed a previously published video on Youtube, you need to get its code. After clicking share, choose embed. Copy and paste the code on your monitored website.

[2] Pasting the URL address on the website (on WordPress example)

7

Paste the generated code onto the website on which you want the film displayed display.

3

  • To iframe add a parameter id=”player”
  • And to the URL address enablejsapi=1

[3] Implementing the script supporting the integration

1

Copy the script from here>>

The script above needs to be pasted in the footer of the website, for example, above the monitoring code.

[A] The part responsible for loading the player.

[B] The part responsible for sending status changes of of the video.

How the script should look in code:

1


Information on user interaction with the video, such as loading, playing, pausing and finishing can be found on relevant contact cards, in the Profile tab, on the left side of the screen.

SALESmanago can register various types of JavaScript events on monitored pages. This includes user activity on embedded youtube videos.

The script can track the following events:

ready (each instance of a player being loaded)

started (starting a video)

pause (each click on a player while a video is playing, this includes pausing and resuming)

ended (finishing a video)

The script code can be modified to update the system on smevents for all videos on the page, or for each video separately. They will be then recorded in the system:

5

Activity can be found in Recent visits,

7

and also general information about entering the film subpage in Other.

7

Setting an independent smevent notification for each iframe

To this end you will need to perform some minor modifications to the code, it is simple enough to do, even for a person with little html experience. Below is an example of how the code should look like before modifications.

<script type="text/javascript">

var tag = document.createElement('script');

tag.src = 'https://www.youtube.com/player_api';

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {

player = new YT.Player('player', {

events: {

'onReady': onPlayerReady,

'onStateChange': onPlayerStateChange

}

});

}

function onPlayerReady(event) {

sm('event', { name: 'video_player_ready' });

}

var firstPlay = false;

function onPlayerStateChange(event) {

if (event.data == YT.PlayerState.PLAYING) {

if (!firstPlay)

sm('event', { name: 'video_started' }); 

firstPlay = true;

}

if (event.data == YT.PlayerState.PAUSED) {

sm('event', { name: 'video_paused' });

}

if (event.data == YT.PlayerState.ENDED) {

sm('event', { name: 'video_ended' });

}

}

</script>

Remember, in order for SALESmanago to monitor activity on a video, an iframe code must be first added to the site. Below you can see an example code.

<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/0z5qByhbJKw?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

Now, to add a second video that will be monitored separately (reported in the system as events distinct from those from the other video) you must first assign it a unique ID, e.g. player2 (as seen in the example below).

<iframe id="player2" width="560" height="315" src="https://www.youtube.com/embed/X3MsjVHHR68?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

Then you have to modify the script code by adding a new variable var player2 and adding a new player in onYouTubeIframeAPIReady() – see the example below.

player2 = new YT.Player('player2', {

events: {

'onReady': onPlayerReady2,

'onStateChange': onPlayerStateChange2

}

});

3/

First you must copy two functions: onPlayerReady and onPlayerStateChange and change their names appropriately (e.g. for player2 create two new functions: onPlayerReady2 and onPlayerStateChange2. If this is done correctly, the script will allow for monitoring of each video separately. Below you can see an example code with all necessary changes in bold.

<script type="text/javascript">

var tag = document.createElement('script');

tag.src = 'https://www.youtube.com/player_api';

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player; var player2;

function onYouTubeIframeAPIReady() {

player = new YT.Player('player', {

events: {

'onReady': onPlayerReady,

'onStateChange': onPlayerStateChange

}

});

player2 = new YT.Player('player2', {

events: {

'onReady': onPlayerReady2,

'onStateChange': onPlayerStateChange2

}

});

}

function onPlayerReady(event) {

sm('event', { name: 'video_player_ready' });

}

var firstPlay = false;

function onPlayerStateChange(event) {

if (event.data == YT.PlayerState.PLAYING) {

if (!firstPlay)

sm('event', { name: 'video_started' });

firstPlay = true;

}

if (event.data == YT.PlayerState.PAUSED) {

sm('event', { name: 'video_paused' });

}

if (event.data == YT.PlayerState.ENDED) {

sm('event', { name: 'video_ended' });

}

}

function onPlayerReady2(event) {

sm('event', { name: 'video_player_ready_new' });

}

var firstPlay2 = false;

function onPlayerStateChange2(event) {

if (event.data == YT.PlayerState.PLAYING) {

if (!firstPlay2)

sm('event', { name: 'video_started_new' }); 

firstPlay2 = true;

}

if (event.data == YT.PlayerState.PAUSED) {

sm('event', { name: 'video_paused_new' });

}

if (event.data == YT.PlayerState.ENDED) {

sm('event', { name: 'video_ended_new' });

}

}

Submit your review
1
2
3
4
5
Submit
     
Cancel

Create your own review

Average rating:  
 0 reviews