AWtomator’s video events are a powerful tool that enhance your videos and give you the ability to perform actions on your AWeber lists when a video is watched to a certain point. You can:
- Segment subscribers (move/copy/tag) or start an AWeber Campaign
- Make a buy button appear when the video reaches a certain timestamp
- Allow subscribers to resume where they left off
That covers 99% of what regular email marketers need… but I wanted to offer our advanced users the ultimate flexibility possible.
So that’s why we’re pleased to introduce our new callback function.
<!-- AWtomator Video Event Callback Function -->
<script>
window.addEventListener("awto_vidcta", function(e) {
var event = e.detail.event; // Event fired
console.log(event+': Fired custom CTA callback'); // for debugging
//////
// Your custom javascript actions go here
//////
});
</script>
If you’ve added this Javascript function to your video page, AWtomator will call it automatically for you when a video event fires. You can then customize it with any additional Javascript actions you like!
For example, you could use it to fire a custom conversion event in Google Analytics, make some page elements disappear, or even do something super fancy, like this…
Wait for the chorus… (45 seconds in)
CONFETTI BOMB!
The callback function is used by all AWtomator video events, and each will pass in its unique ID via the event parameter. That way, if you are stacking multiple events on the page, you can use the event parameter to identify which event has just fired.
For example, we could make come custom fade in/outs and trigger a GTM event for conversion tracking when Video event 'abc123' fires like so:
<!-- AWtomator Video Event Callback Function -->
<script>
window.addEventListener("awto_vidcta", function(e) {
var event = e.detail.event; // Event fired
console.log(event+': Fired custom CTA callback'); // for debugging
// This code is for when event abc123 fires
if ('abc123' == event) {
// Do some custom fades using jQuery
jQuery(document).ready(function($) {
$('.fadeout').fadeOut(10); // Fade out class
$('.fadein').fadeIn(10); // Fade in class
});
// Send a GTM event (for Analytics etc)
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'VideoWatched'
});
} // end of code for event abc123
});
</script>
By giving you the ability to run your own code when a video trigger fires, the possibilities are endless.
Cheers
Rob
BTW - The video event that controls this demo video has it's remember last visit settings turned off, so the special effect (spoiler) is hidden again each time you come back.