使用jQuery和谷歌Analytics(分析)活动追踪的YouTube视频播放(Track You

2019-10-19 12:19发布

我有4个IFRAME,我想通过点击其ID恢复。 我走了使用谷歌分析我的iframe中,我把自己的ID在表中。 然后,我创建类型YT.Player的对象

Probleme:onPlayerStateChange不运行的方法。

这里是我的代码:

<script type="text/javascript">

/*
    YouTube Analytics
    Code adapted from:
        http://www.lunametrics.com/blog/2012/10/22/automatically-track-youtube-videos-events-google-analytics/
        http://lunametrics.wpengine.netdna-cdn.com/js/lunametrics-youtube.js
    Code adapted by Alex Mueller for ISITE Design http://isitedesign.com
*/

// enable cross-domain scripting in IE < 10 for the YouTube Data API
// https://github.com/jaubourg/ajaxHooks/blob/master/src/xdr.js
if(window.XDomainRequest){jQuery.ajaxTransport(function(e){if(e.crossDomain&&e.async){if(e.timeout){e.xdrTimeout=e.timeout;delete e.timeout}var t;return{send:function(n,r){function i(e,n,i,s){t.onload=t.onerror=t.ontimeout=jQuery.noop;t=undefined;r(e,n,i,s)}t=new XDomainRequest;t.onload=function(){i(200,"OK",{text:t.responseText},"Content-Type: "+t.contentType)};t.onerror=function(){i(404,"Not Found")};t.onprogress=jQuery.noop;t.ontimeout=function(){i(0,"timeout")};t.timeout=e.xdrTimeout||Number.MAX_VALUE;t.open(e.type,e.url);t.send(e.hasContent&&e.data||null)},abort:function(){if(t){t.onerror=jQuery.noop;t.abort()}}}}})}

// load the YouTube iframe API
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// initialize our arrays to hold video and player information
var playerArray = [],
    videoArray = [];

// safely pass the jQuery object as $
(function($) {
    // enables tracking of all YouTube videos on the page
    function trackYouTube() {
        // iterate through every iframe on the page
        $('iframe').each(function(i) {
            // grab the video source and other properties
            var baseUrlLength,
                $iframe = $(this),
                iframeSrc = $iframe.attr('src'),
                isYouTubeVideo = false,
                videoID,
                url;

            // if the video uses the http protocol
            if (iframeSrc.substr(0,25) == "http://www.youtube.com/v/") {
                baseUrlLength = 25;
                isYouTubeVideo = true;

            }
            // otherwise if the video uses the https protocol
            else if (iframeSrc.substr(0,26) == "https://www.youtube.com/v/") {
                baseUrlLength = 26;
                isYouTubeVideo = true;
            }

            // if we're dealing with a YouTube video, store its information in our arrays
            if (isYouTubeVideo) {
                // grab the videoID
                videoID = iframeSrc.substr(baseUrlLength);

                url = '//gdata.youtube.com/feeds/api/videos/' + videoID + '?v=2&alt=json';

                // if the ID ends with extra characters...
                if (videoID.indexOf('&') > -1) {
                    // ...remove the extra characters
                    videoID = videoID.substr(0, videoID.indexOf('&'));

                }

                // put an object in our array with the videoID...
                videoArray[i] = {};
                videoArray[i].id = videoID;

                // put the videoID on the iframe as its id
                $iframe.attr('id', videoID);

            }
        });
    }

    $(function() {
        // initiate tracking on document ready
        trackYouTube();
                onYouTubeIframeAPIReady();
    });

})(jQuery);

function onYouTubeIframeAPIReady() {
    // insert YouTube Player objects into our playerArray
    for (var i = 0; i < videoArray.length; i++) {
        playerArray[i] = new YT.Player(videoArray[i].id, {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }
}

// when the player changes states
function onPlayerStateChange(event) {

    // if the video begins playing, send the event
    if (event.data == YT.PlayerState.PLAYING) {
        alert();
    }
    // if the video ends, send the event
    if (event.data == YT.PlayerState.ENDED) {
        alert();
    }
}

        </script>

Answer 1:

你必须设置enablejsapi参数1在您的iframe嵌入的链接。

默认情况下,该参数设置为0,除非你将其设置为1,回调将无法正常工作。

参考: https://developers.google.com/youtube/js_api_reference



文章来源: Track YouTube Video Playback with jQuery and Google Analytics Events