6

मैं IFRAME Vimeo वीडियो एम्बेड के लिए अपनी साइट पर जीए इवेंट ट्रैकिंग सेट अप करने का प्रयास कर रहा हूं। हालांकि, मैं यह नहीं समझ सकता कि मेरे IFRAME कोड में ट्रैकिंग ऑब्जेक्ट कहां रखा जाना चाहिए।जीए इवेंट ट्रैकिंग का उपयोग कर वीडियो ट्रैकिंग

<iframe src="http://player.vimeo.com/video/51447433" width="500" 
    height="281"frameborder="0" webkitAllowFullScreen 
    mozallowfullscreen allowFullScreen></iframe> 

यहाँ मैं क्या सोचता GA Event Tracking कोड तरह दिखना चाहिए::

<a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Title']);">Play</a> 

इस मेरे एम्बेड कोड में जाता है

यहाँ मेरी IFRAME एम्बेड कोड है? क्या कोई मुझे दिखा सकता है कि यह कैसे दिखना चाहिए/काम करना चाहिए?

उत्तर

6

आपको प्लेयर एपीआई का उपयोग करने की आवश्यकता है क्योंकि आप किसी तीसरे पक्ष के डोमेन पर आईफ्रेम के अंदर कोड इंजेक्ट नहीं कर सकते हैं।

player API टी के लिए प्रदान किए गए दस्तावेज़ों के आधार पर ऐसा कुछ दिखना चाहिए।

Working Example

<html> 
<head> 
    <script type="text/javascript"> 

    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-XXXXXX-1']); 
    _gaq.push(['_trackPageview']); 

    (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 

</script> 
<script> 
var f = document.getElementsByTagName('iframe')[0], 
    url = f.src.split('?')[0]; 

// Listen for messages from the player 
if (window.addEventListener){ 
    window.addEventListener('message', onMessageReceived, false); 
} 
else { 
    window.attachEvent('onmessage', onMessageReceived, false); 
} 

// Handle messages received from the player 
function onMessageReceived(e) { 
    var data = JSON.parse(e.data); 

    switch (data.event) { 
     case 'ready': 
      onReady(); 
      break; 

     case 'play': 
      onPlay(); 
      break; 

     case 'finish': 
      onFinish(); 
      break; 
    } 
} 

// Helper function for sending a message to the player 
function post(action, value) { 
    var data = { method: action }; 

    if (value) { 
     data.value = value; 
    } 

    f.contentWindow.postMessage(JSON.stringify(data), url); 
} 

function onReady() { 
    post('addEventListener', 'finish'); 
    post('addEventListener', 'play'); 
} 


function onFinish() { 
    _gaq.push(['_trackEvent', 'Vimeo Video', 'finish', url]); 
} 

function onPlay() { 
    _gaq.push(['_trackEvent', 'Vimeo Video', 'play', url]); 
} 
</script> 
</head> 
<body> 
    <iframe src="http://player.vimeo.com/video/27855315?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</body> 
</html> 

ऊपर कोड Vimeo Mogaloop एपीआई कि संदेश आप के लिए एपीआई पासिंग एब्सट्रैक्ट, पुस्तकालय के साथ जावास्क्रिप्ट लोड हो रहा है की कीमत पर का उपयोग करके एक सरल किया जा सकता।

प्लगइन्स उपयोग करने के लिए

ध्यान दें कि उपरोक्त कोड केवल एक उदाहरण के रूप में काम करेंगे और आप एक पृष्ठ पर एकाधिक वीडियो मौजूद यह कठिन हो यह सही पाने के लिए कर सकते हैं तैयार। वैकल्पिक रूप से आप GAS (मैं मुख्य डेवलपर हूं) लाइब्रेरी का उपयोग भी कर सकता हूं जिसमें plugin for tracking Vimeo Video है।

संगतता के बारे में चेतावनी

नोट संगतता के बारे में चेतावनी, मुझे लगता है अगर आप फ़्लैश पद्धति का उपयोग करके खिलाड़ी डालने आप समर्थित ब्राउज़र में से एक व्यापक रेंज मिलता है लेकिन iOS उपकरणों के लिए पूरी तरह से खिलाड़ी को मार सकता है:

सार्वभौमिक एम्बेड कोड के साथ, प्लेयर के साथ संवाद करने का एकमात्र तरीका window.postMessage का उपयोग कर है। पोस्टमेसेज अपेक्षाकृत नया विकास है, इसलिए यह केवल इंटरनेट एक्सप्लोरर 8+, फ़ायरफ़ॉक्स 3+, सफारी 4+, क्रोम और ओपेरा 9 + में उपलब्ध है।

+0

में एक वर्थ "प्ले" लेने के लिए एक बहुत सारे कामकाज की तरह लग रहा है। यहां मदद के लिए धन्यवाद, बहुत उपयोगी है। – Brett

+0

मुझे यह मंच और देव वातावरण पर मेरी साइट के लिए काम कर रहा है लेकिन यह उत्पादन पर काम नहीं कर रहा है। उत्पादन साइट https में है, लगता है कि यह कारण हो सकता है? – SirM

संबंधित मुद्दे