前提・実現したいこと
はじめて質問させていただきます。
YouTube IFrame APIで、1つのページに複数の動画を配置し、それぞれの動画再生回数をGoogle Analyticsで計測したいです。
現在、1つのページに4つの動画を設置しています。
1つを再生すると、全部の動画が再生回数1として、カウントされてしまいます。
どうしたら、個別の動画再生回数をカウントできるのか、
わかる方いらっしゃいましたら教えてください。
どうぞよろしくお願いいたします。
発生している問題・エラーメッセージ
1つの動画を再生すると、全部の動画が再生回数1としてカウントされてしまいます。
該当のソースコード
<body> <div id="player01" class="movie"></div> <div id="player02" class="movie"></div> <div id="player03" class="movie"></div> <div id="player04" class="movie"></div> <script> 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 ytPlayer = []; var ytData = [ { id: 'vOA_hG-pR8E', area: 'player01', label: 'movie1'}, { id: 'XsQ64wGtS8o', area: 'player02', label: 'movie2'}, { id: '9PXVyyn2hTk', area: 'player03', label: 'movie3'}, { id: '5AlDLqTE-oI', area: 'player04', label: 'movie4'} ]; var playerTrackEvent = function(){ for(var i = 0; i < ytData.length; i++) { if(gtag){ gtag('event','play',{ 'event_category':'YouTube', 'event_label':ytData[i]['label'] }); playerTrackEvent = undefined; } }; } function onYouTubeIframeAPIReady() { for(var i = 0; i < ytData.length; i++) { ytPlayer[i] = new YT.Player(ytData[i]['area'], { videoId: ytData[i]['id'], events: { 'onReady': onPlayerReady, 'onStateChange': function(e){ if(e.data === YT.PlayerState.PLAYING && playerTrackEvent){ playerTrackEvent(); } } } }); } } function onPlayerReady(event) { event.target.stopVideo(); } </script> </body>
試したこと
再生した動画のytData[i]['label']が送信されるように、for(var i = の部分をいじってみたり、記述の順序を変えてみたりしましたが、うまくいきません。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー