Tagging HTML5 video with Adobe Analytics

[Jayakrishnaa]

Team,

We are trying to implement tagging for HTML5 Videos on our site via Adobe Analytics. We are referring this blog http://video.marijka.com/milestone/html5-blog.html for help. We have used the code provided here and used it in a javascript extension. We have updated all the variables according to our account’s mapping of evars and events. Still the tag is not firing. The code version what they have used is H.26.2 but what we trying in Tealium is H.27. Is there any other approach we should take or make any particular changes in the code, please suggest. 

Thank you,
Jay.

[ruipedromachado]

Hi @Jayakrishnaa,

Here is another approach.

Add a new Javascript extension with the scope of "DOM Ready" with the following snippet:

            /*
             * 
             * tracks html 5 videos
             * 
             */
            (function (w, d) {
                
                /*
                 * 
                 * set percentage milestones to track
                 * 
                 */
                w.mileStones = [10, 25, 50, 75, 90];

                /*
                 * 
                 * dont edit bellow
                 * 
                 */
                w.videoplayers = [];
                function init() {
                    var videos = d.getElementsByTagName('video')
                    for (var i = 0; i < videos.length; i++) {

                        var id = videos[i].id;
                        if (id === null || id === undefined) {
                            videos[i].id = "tl_video_" + i
                        }
                        ;
                        videos[i].addEventListener('ended', videoEnd, false);
                        videos[i].addEventListener('timeupdate', videoTimeUpdate, false);
                        videos[i].addEventListener('play', videoPlay, false);
                        videos[i].addEventListener('pause', videoPause, false);

                        w.videoplayers.push({
                            playerId: videos[i].id,
                            mileStones: JSON.parse(JSON.stringify(w.mileStones))
                        });
                    }
                }

                function buildTrackableVideoInfoEvent(e) {
                    return {
                        "event": "video",
                        "baseURI": e.currentTarget.baseURI,
                        "currentSrc": e.currentTarget.currentSrc,
                        "id": e.currentTarget.id,
                        "volume": e.currentTarget.volume,
                        "action": e.type === "timeupdate" ? "percentageComplete" : e.type,
                        "currentTime": e.currentTarget.currentTime,
                        "duration": e.currentTarget.duration
                    };
                }

                function videoTimeUpdate(e) {
                    var t = buildTrackableVideoInfoEvent(e);
                    var obj;

                    for (var i = 0; i < w.videoplayers.length; i++)
                        if (w.videoplayers[i].playerId === t.id) {
                            obj = w.videoplayers[i];
                            break;
                        }

                    var duration = t.duration;
                    var playhead = t.currentTime;
                    var percComplete = (playhead / duration) * 100;
                    var ms_len = obj.mileStones.length;
                    if (ms_len > 0) {
                        var next_ms = obj.mileStones[0];
                        if (next_ms <= percComplete) {
                            obj.mileStones.shift();
                            t.percComplete = next_ms;
                            w.console.log(t.percComplete + '% video played : ' + t.currentSrc);
                            w.utag.link(t);
                        }
                    }
                }

                function videoEnd(e) {
                    var t = buildTrackableVideoInfoEvent(e);
                    for (var i = 0; i < w.videoplayers.length; i++)
                        if (w.videoplayers[i].playerId === t.id) {
                            w.videoplayers[i].mileStones = JSON.parse(JSON.stringify(w.mileStones))
                            break;
                        }
                    w.console.log('100% video played' + t.currentSrc);
                    w.utag.link(t);
                }

                function videoPlay(e) {
                    var t = buildTrackableVideoInfoEvent(e);
                    w.console.log('video start : ' + t.currentSrc);
                    w.utag.link(t);
                }

                function videoPause(e) {
                    var t = buildTrackableVideoInfoEvent(e);
                    w.console.log('video paused : ' + t.currentSrc);
                    w.utag.link(t);
                }
                
                init();
 
            })(window, document);

This snippet will track pages with multiple videos also.

This snippet assigns an ID to each video tag if its missing.

This snippet will track at least (with the testings done) the following media types: mp4, webm, ogv

With the extension in place, all it remains is to properly map the events(event) and data(evar and props) on the "Mapped Variables" section of the tag.

Without looking at the code, the extension will fire an event on video:

• start
• pause
• end
• 10% complete
• 25% complete
• 50% complete
• 75% complete
• 90% complete

Different percentage milestones can be set in this line of code in the snippet:

                /*
                 * 
                 * set percentage milestones to track
                 * 
                 */
                w.mileStones = [10, 25, 50, 75, 90];

The following information is sent on each event (so it can be passed to adobe from the tag mappings):

• event = video
• baseUri = (with current url)
• currentsrc=(with the video url source)
• id = (video id)
• volume = (current volume on video)
• action = (values: percentageComplete, start, pause, end)
• currentTime = (current video time)
• duration = (current video duration)
• percComplete = (milestone percentage when its a milestone action event)

Here is a full working example on a web page to test in a local environment:

<!DOCTYPE html>
<html>
    <head>

        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>

            header {
                font-size: 20px;
                font-style: italic;
                font-weight: bold;
                color: red;
                margin: 5px 5px 5px 0;
            }

            section {
                padding: 20px
            }

        </style>

        <script>
            
            /*
             * 
             * tracks html 5 videos
             * 
             */
            (function (w, d) {

                d.addEventListener('DOMContentLoaded', init, false)

                /*
                 * 
                 * set percentage milestones to track
                 * 
                 */
                w.mileStones = [10, 25, 50, 75, 90];

                /*
                 * 
                 * dont edit bellow
                 * 
                 */
                w.videoplayers = [];
                function init() {
                    var videos = d.getElementsByTagName('video')
                    for (var i = 0; i < videos.length; i++) {

                        var id = videos[i].id;
                        if (id === null || id === undefined) {
                            videos[i].id = "tl_video_" + i
                        }
                        ;
                        videos[i].addEventListener('ended', videoEnd, false);
                        videos[i].addEventListener('timeupdate', videoTimeUpdate, false);
                        videos[i].addEventListener('play', videoPlay, false);
                        videos[i].addEventListener('pause', videoPause, false);

                        w.videoplayers.push({
                            playerId: videos[i].id,
                            mileStones: JSON.parse(JSON.stringify(w.mileStones))
                        });
                    }
                }

                function buildTrackableVideoInfoEvent(e) {
                    return {
                        "event": "video",
                        "baseURI": e.currentTarget.baseURI,
                        "currentSrc": e.currentTarget.currentSrc,
                        "id": e.currentTarget.id,
                        "volume": e.currentTarget.volume,
                        "action": e.type === "timeupdate" ? "percentageComplete" : e.type,
                        "currentTime": e.currentTarget.currentTime,
                        "duration": e.currentTarget.duration
                    };
                }

                function videoTimeUpdate(e) {
                    var t = buildTrackableVideoInfoEvent(e);
                    var obj;

                    for (var i = 0; i < w.videoplayers.length; i++)
                        if (w.videoplayers[i].playerId === t.id) {
                            obj = w.videoplayers[i];
                            break;
                        }

                    var duration = t.duration;
                    var playhead = t.currentTime;
                    var percComplete = (playhead / duration) * 100;
                    var ms_len = obj.mileStones.length;
                    if (ms_len > 0) {
                        var next_ms = obj.mileStones[0];
                        if (next_ms <= percComplete) {
                            obj.mileStones.shift();
                            w.console.log(next_ms + '% video played : ' + t.currentSrc);
                        }
                    }
                }

                function videoEnd(e) {
                    var t = buildTrackableVideoInfoEvent(e);
                    for (var i = 0; i < w.videoplayers.length; i++)
                        if (w.videoplayers[i].playerId === t.id) {
                            w.videoplayers[i].mileStones = JSON.parse(JSON.stringify(w.mileStones))
                            break;
                        }
                    w.console.log('100% video played' + t.currentSrc);
                }

                function videoPlay(e) {
                    var t = buildTrackableVideoInfoEvent(e);
                    w.console.log('video start : ' + t.currentSrc);
                }

                function videoPause(e) {
                    var t = buildTrackableVideoInfoEvent(e);
                    w.console.log('video paused : ' + t.currentSrc);
                }

            })(window, document);
            
        </script>

    </head>
    <body>
        <section>

            <header>Media Type <mark>mp4</mark></header>
            <video id="videomp4" controls="" preload="none" poster="https://media.w3.org/2010/05/sintel/poster.png">

                <source id="mp4" src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">

                <p>Your user agent does not support the HTML5 Video element.</p>
            </video>


        </section>
        <section>

            <header>Media Type <mark>webm</mark></header>
            <video id="videowebm" controls="" preload="none" poster="https://media.w3.org/2010/05/sintel/poster.png">

                <source id="webm" src="https://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">

                <p>Your user agent does not support the HTML5 Video element.</p>
            </video>


        </section>
        <section>

            <header>Media Type <mark>ogv</mark></header>
            <video id="videoogv" controls="" preload="none" poster="https://media.w3.org/2010/05/sintel/poster.png">

                <source id="ogv" src="https://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">

                <p>Your user agent does not support the HTML5 Video element.</p>
            </video>


        </section>
    </body>
</html>

[sriiniivas]

hey thanks for this and with a few modifications I was able to get just the initial play and end tracking.

however, the console gets flooded with obj not defined. for some reason, the var obj; is not defining the obj. I'm not a js developer and any help will be helpful :) 

[ruipedromachado]

Hi @sriiniivas

By your description, I assume you have 3 of the main events working

• start
• pause
• end

That does make sence, since those 3 do not use any "obj" variable.

So, the events that are missing and flooding the console with "obj" errors are from the milestone tracking, which does contain an "obj" variable. To get "obj" not defined errors it means its not finding the video object in the array. 

Try and see why it is not finding the video object in the array.

Hope this helps