The YouTube plugin enables you to track YouTube videos on your website with the Piano Analytics SDK. The plugin makes the tracking as simple as possible, while keeping all the flexibility of the AV Insights module.
By installing the JS library on your website and following the documentation below, you will be able to fully track YouTube videos. The plugin will automatically send contextual and technical events according to the media information provided.
It also includes a function enabling you to add your own properties to the events.
- Get started
- Install the plugin
- Reference our functions in the YouTube code
- Add properties to your events
- Complete tagging example
- Load the
youtube-pa-connector.jsplugin in your project just after thepiano-analytics.jslibrary - Read the documentation for an overview of the functionalities and examples
- Collect AV Insights events from your YouTube videos.
Download the youtube-pa-connector.js directly from this repo and install it along with the piano-analytics.js library.
<script src="piano-analytics.js"></script>
<script type="text/javascript">
pa.setConfigurations({
// Basic configuration to send events
site: 123456789,
collectDomain: "https://logsx.xiti.com",
});
</script>
<script src="youtube-pa-connector.js"></script>YouTube provides the following code to embed its video player on an HTML page (doc: YouTube Player API Reference for iframe Embeds)
<html>
<body>
<div id="player"></div>
<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);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player("player", {
height: "360",
width: "640",
videoId: "M7lc1UVf-VE",
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange,
},
});
}
</script>
</body>
</html>You have to replace the events parameter in the player variable in order to reference the plugin's functions:
Base code
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}Modified code
events: {
'onReady': paYoutubeConnector.onPlayerReady,
'onStateChange': paYoutubeConnector.onPlayerStateChange,
'onError': paYoutubeConnector.onError,
'onPlaybackQualityChange': paYoutubeConnector.onPlaybackQualityChange,
'onPlaybackRateChange': paYoutubeConnector.onPlaybackRateChange
}You then need to add plugin configuration to reference the media:
paYoutubeConnector.media = new pa.avInsights.Media(5, 5);
paYoutubeConnector.params = {
av_content_type: "Video clip",
av_content_genre: ["Medieval", "Rap", "Bardcore", "Tavernware"],
av_author: "Eminem",
av_publication_date: 1613516400,
};The plugin supports the following events:
av.play / av.start / av.heartbeat / av.pause / av.resume / av.stop
The following properties are automatically set by the plugin.
| Property key | Type | Mandatory | Description | Source |
|---|---|---|---|---|
| av_content_id | string | yes | Audio/Video content identifier | player.getVideoData().video_id |
| av_content | string | - | Title of the Audio/Video content | player.getVideoData().title |
| av_content_duration | integer | - | Total duration of the Audio/Video content (milliseconds) | player.getDuration() |
| av_broadcasting_type | string | - | Broadcasting type (live or clip) | player.getVideoData().isLive |
You can set additional properties using the paYoutubeConnector.params method:
Method: paYoutubeConnector.params = <propertiesObject>
| Property key | Type | Mandatory |
|---|---|---|
propertiesObject |
object | Pairs of propertyKey and propertyValue |
<script>
paYoutubeConnector.media = new pa.avInsights.Media(5, 5);
paYoutubeConnector.params = {
av_content_type: "TV show",
av_content_genre: ["Crime", "Drama", "Mystery"],
av_show: "Dark",
av_publication_date: 15010656730,
};
</script><html>
<head>
<title>My Page</title>
<script src="piano-analytics.js"></script>
<script type="text/javascript">
pa.setConfigurations({
// Basic configuration to send events
site: 123456789,
collectDomain: "https://logsx.xiti.com",
});
</script>
<script src="youtube-pa-connector.js"></script>
</head>
<body>
<div id="player"></div>
<script type="text/javascript">
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player("player", {
height: "360",
width: "640",
// For single video
videoId: "M7lc1UVf-VE",
playerVars: {
// For playlist
listType: "playlist",
list: "PLWl6AOhb9Iui-_BUFmoYGO-E7YLsXK0IN",
},
events: {
onReady: paYoutubeConnector.onPlayerReady,
onStateChange: paYoutubeConnector.onPlayerStateChange,
onError: paYoutubeConnector.onError,
onPlaybackQualityChange: paYoutubeConnector.onPlaybackQualityChange,
onPlaybackRateChange: paYoutubeConnector.onPlaybackRateChange,
},
});
}
paYoutubeConnector.media = new pa.avInsights.Media(5, 5);
paYoutubeConnector.params = {
av_content_type: "Video clip",
av_content_genre: ["Medieval", "Rap", "Bardcore", "Tavernware"],
av_author: "Eminem",
av_publication_date: 1613516400,
};
</script>
</body>
</html>