How to configure a trigger that fires when 50% of a video has been viewed?

Data collection and tags
1

We have a goal configured when 50% of videos have been viewed. We also want to fire other tags when 50% of videos are viewed and we need a trigger to do so. However, there is no event option available in the trigger types that corresponds to th eplay duration of videos.

How can this be solved please?

2

Hi @LoneWolves,

Are you using the HTML5 video tracking template?

3

NO, we are using the YouTube video tracking template.

4

Hey @LoneWolves,

Currently we can’t really do it in the UI although as an alternative we can work with the minified code and find the part which is responsible for the progress. Once we find it we can add our own logic to push a DL event whenever the progress is 50. I’ve modified the template below so that it sends a dataLayer event whenever the progress reaches 50%. The event is called “progress_50” and you can add new tags with a DL trigger set on “progress_50”.

This code should be added in a Custom code tag and it should be a replacement for the Youtube video tracking tag.

Please let me know if you have any questions :slight_smile:

<script>
    (function (a, n, r) {
        function o(e) {
            var t;
            !(function (e) {
                try {
                    e.contentWindow.location.href;
                } catch (e) {
                    return 1;
                }
            })(e)
                ? setTimeout(function () {
                      o(e);
                  }, 500)
                : ((t = new YT.Player(e, { events: { onStateChange: c } })), e.setAttribute("data-listener-attached", !0), (t.lastAction = "i"));
        }
        function i(e) {
            return "function" == typeof e.getCurrentTime ? e.getCurrentTime() : e.playerInfo.currentTime;
        }
        function s(e, t) {
            (n._paq = n._paq || []), n._paq.push(["trackEvent", "Video - YouTube", t, ("function" == typeof (t = e).getVideoData ? t.getVideoData() : t.playerInfo.videoData).title, i(e).toFixed()]);
        }
        function c(e) {
            var t = e.target;
            e.data === YT.PlayerState.PLAYING && setTimeout(u, 1e3, t),
                e.data === YT.PlayerState.PLAYING && (-1 < ["i", "p"].indexOf(t.lastAction) && s(t, "i" === t.lastAction ? "Play" : "Resume"), (t.lastAction = "")),
                e.data === YT.PlayerState.PAUSED && (s(t, "Pause"), (t.lastAction = "p")),
                e.data === YT.PlayerState.ENDED && (s(t, "Watched"), (t.lastAction = "i"));
        }
        function u(e) {
            var t, a, n, o;
            ("function" == typeof (t = e).getPlayerState ? t.getPlayerState() : t.playerInfo.playerState) === YT.PlayerState.PLAYING &&
                r.trackThresholds &&
                ((t = r.thresholdsToTrack),
                (o = e),
                (o = Math.round((i(o) / ("function" == typeof (o = o).getDuration ? o.getDuration() : o.playerInfo.duration)) * 100)),
                (n = o),
                (o = t),
                ((a = e).passedThresholds = a.passedThresholds || []),
                o.forEach(function (e) {
              		if (!a.passedThresholds.includes(e) && e < n) {
                      a.passedThresholds.push(e);
                      s(a, "Progress - " + e + "%");
					  if(e === 50){
                            window.dataLayer.push({
                                'event': 'progress_50'
                            });
                      }
                  }
                }),
                setTimeout(u, 1e3, e));
        }
        function e() {
            a.querySelectorAll("iframe").forEach(function (e) {
                var t, a;
                /youtube.*\/embed/.test(e.src) &&
                    !e.getAttribute("data-listener-attached") &&
                    (-1 === (a = (t = e).src).indexOf("enablejsapi=") && (a += (-1 === a.indexOf("?") ? "?" : "&") + "enablejsapi=1"),
                    -1 === a.indexOf("origin=") && (a += (-1 === a.indexOf("?") ? "?" : "&") + "origin=" + encodeURIComponent(location.origin)),
                    (t.src = a),
                    o(e));
            });
        }
        function t(e) {
            var t;
            n.MutationObserver && ((t = a.getElementsByTagName("body")[0]), new MutationObserver(e).observe(t, { childList: !0, attributes: !1, subtree: !0 }));
        }
        var d, l, f;
        Boolean(n.YT)
            ? (e(), t(e))
            : ((d = n.onYouTubeIframeAPIReady),
              (n.onYouTubeIframeAPIReady = function () {
                  "function" == typeof d && d(), e(), t(e);
              }),
              (l = a.createElement("script")),
              (f = a.getElementsByTagName("script")[0]),
              (l.src = "//www.youtube.com/iframe_api"),
              (l.async = !0),
              f.parentNode.insertBefore(l, f));
    })(document, window, {
        trackThresholds: 1,
        thresholdsToTrack: [25, 50, 75],
    });
</script>
2 Likes