Sitecore tip 50: Track video play clicks with Sitecore goals

Recently I was helping out a customer with leveraging their Sitecore Platform by starting with a simple campaign. It contained several channels like social, paid and email, but also a landingpage with a video. While thinking and discussing about strategic and marketing objectives, I wondered: is it possible to track the video play clicks with Sitecore goals?

Well…yes it is possible!

That is awesome because it gives another dimension to the contacts profile. Not only button and link clicks but also these types of interaction can be tracked. It gives marketer a much richer customer profile to personalize on.

I used Vimeo for my experiment. I searched for how to catch the play button event. Luckily with Vimeo this is easy with their Javascript SDK. Within minutes I had the play button click in my hands. Now I can use it with the Sitecore sc_trk query string parameter in Sitecore to fire a goal trigger. See my old post to see how to set this up: https://www.linkedin.com/pulse/hidden-marketing-capability-gems-sitecore-trigger-goal-emmerzaal/

But shoot, every play click was catched. This means that my goal can be triggered many times when someone keeps playing and pausing the video. So I searched for a way to prevent that. Seems this is called a throttle function (or debounce function if you need the other way around). Sorry for my non-technical mind and technical discovery here :).

Now I can configure (within javascript) how many miliseconds I want to wait before triggering the goal again to prevent data pollution. For my experiment I set the timout to 10 minutes. You should think about a logical timeout yourself.

My solution looks like follows and was setup for my experiment by placing a free HTML SXA component on a page that contains all Javascript and the embedded Vimeo video:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script>
<iframe src="https://player.vimeo.com/video/463286266" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
  <script>
	var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);


    player.on('play', throttle(function() {
		console.log('Played the video');
		$goalURL="https://sc10sc.dev.local/dmp/-/media/Project/Tenant/shared/goal-measure-pixel.gif?sc_trk={798B2191-7E60-476D-BEAE-941015DECFE6}";
        $.get( $goalURL );
    }, 600000));
     
	function throttle (callback, limit) {
		var waiting = false;                      // Initially, we're not waiting
		return function () {                      // We return a throttled function
			if (!waiting) {                       // If we're not waiting
				callback.apply(this, arguments);  // Execute users function
				waiting = true;                   // Prevent future invocations
				setTimeout(function () {          // After a period of time
					waiting = false;              // And allow future invocations
				}, limit);
			}
		}
	}
</script>

You can create a much nicer solution with SXA and Scriban to make certain parameters configurable per video, like the video id, timout and goal id.

So now I have a Vimeo video with the Vimeo Javascript SDK and my Sitecore sc_trk solution all combined as a easy solution to track video play clicks. In the image below you see an example of this goal in the xProfile (ignore the notfound url 😉 ).

Cool huh! Now this may seem like a technical post but for all the marketers out there, you can personalize experiences based on video clicks! Or even use it as a trigger/condition in marketing automation. It helps creating an even more personalized experience.