How to’s Video Gallery

This is just a demonstration on how you can use Flexie Tracking on your website, and set it to track your video views.

The code below is what’s is needed to track 3 basic events from each of the videos in the below gallery.

Video Playing
Video Pause
Video Finished

<script>

// This code loads the IFrame Player API code asynchronously.
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 players = new Array();
var videos = document.querySelectorAll('.elementor-video-iframe');

function createPlayer(player, index) {
    return new YT.Player(player, { 
        events: {
            'onStateChange': function(event) {
                switch(event.data) {
                    case YT.PlayerState.PLAYING:
                        FlexieSDK.trackPageHit({
                            hitEvent: 'VIDEO',
                            metadata: {
                                video: players[index].getVideoData().title,
                                event: 'VIDEO_PLAYING',
                                duration: players[index].getDuration()
                            }
                        });
                        break;
                    case YT.PlayerState.PAUSED:
                        FlexieSDK.trackPageHit({
                            hitEvent: 'VIDEO',
                            metadata: {
                                video: players[index].getVideoData().title,
                                event: 'VIDEO_PAUSED',
                                pausedAt: players[index].getCurrentTime()
                            }
                        });
                        break;
                    case YT.PlayerState.ENDED:
                        FlexieSDK.trackPageHit({
                            hitEvent: 'VIDEO',
                            metadata: {
                                video: players[index].getVideoData().title,
                                event: 'VIDEO_FINISHED',
                                duration: players[index].getDuration()
                            }
                        });
                        break;
                    default:
                      return;
                }
            }
        }
    });
}

function onYouTubeIframeAPIReady(args) {
    var i; for (i = 0; i < videos.length; i++) {
        players[i] = createPlayer(jQuery('.elementor-video-iframe')[i], i);
    }
}

</script>