Youtube API和跟踪嵌入式视频 [英] Youtube API and tracking embedded video

问题描述

现在的问题是在一个页面上嵌入多个Youtube视频，现在Youtube Analytics无法使用。以前，我在Drupal页面上有很多嵌入式视频，但该网站并不适合搜索引擎优化，页面速度很慢，许多嵌入式Youtube视频使用js和css将许多电话带回到Youtube网站。

我发现了一些关于通过用占位符图像替换Youtube播放器并且当用户希望观看时加速网站的好文章。我在这里找到了js代码（ http://www.labnol.org/internet / light-youtube-embeds / 27941 / 和 http://schoberg.net/2015/08/fast-agile-youtube-embed-responsive-iframe-load-delay-with-jquery/ ）那些黑客网站加载速度更快，搜索引擎优化分数更高。

输入另一个问题。现在，Youtube分析不再跟踪网站上的Youtube视频。我不知道为什么，视频仍然会被点击，并且嵌入的视频会在网站上播放。

我应该如何处理嵌入代码，让它再次跟踪Youtube视频？

我该如何才能如果我不能跟踪YouTube分析，跟踪它与谷歌分析？

我需要一些StackOverflow魔术......

<在页面上嵌入Youtube视频的代码是：

 < div class =youtubeid =_ ynxddD0Eqk >< / DIV> 
  

以及后端的函数代码：

 < script> 
 $（document）.ready（function（）{
 $（。youtube）。each（function（）{
 //根据youtube ID设置BG图像
 $（this）.css（'background-image'，'url（// i.ytimg.com/vi/'+ this.id +'/hqdefault.jpg）'）; 
 //点击video div 
 $（document）.delegate（'＃'+ this.id，'click'，function（）{
 //构建嵌入URL 
 var iframe_url =// www。 youtube.com/embed/+ this.id +？autoplay = 1& autohide = 2& wmode = opaque& enablejsapi = 1; 
 //获取div 
上设置的额外参数if （this）.data（'params'））iframe_url + ='&'+ $（this）.data（'params'）; 
 //构建iframe标记
 var iframe = $（' < iframe />'，{'allowfullscreen'：'allowfullscreen'，'frameborder'：'0'，'src'：iframe_url}）; 
 // youtube事件跟踪
 $（iframe ）.addClass（media-youtube-player）; 
 //用YouTube HTML5 Player替换YouTube缩略图
 $（this）.replaceWith（iframe）; 
}）; // / click 
}）; // /每个视频
}）; // /文档准备就绪
< / script> 
  

解决方案

我想用Komito Analytics推荐解决方案。

是的，它会被Google Analytics自动跟踪。请按 https://komito.net/integration/ 中的说明加入脚本：

 < script src =https://komito.net/komito.js>< / script> 
  

该文档还反映了默认配置设置，请查看它们并关闭不需要的指标。

The issue at hand is the embedding of multiple Youtube videos on a page and now the Youtube Analytics is not working. Previously I had many embedded videos on a Drupal page, but the site was not SEO friendly with the speed of the page being slow with many embedded Youtube videos making many calls back to Youtube site with js and css.

I found some good articles about speeding up the site by replacing the Youtube player with a placeholder image and when the user wishes to watch. I found the js code here (http://www.labnol.org/internet/light-youtube-embeds/27941/ and http://schoberg.net/2015/08/fast-agile-youtube-embed-responsive-iframe-load-delay-with-jquery/) With those "hacks" the website loads much faster and quicker and SEO score is higher.

Enter another problem. Now the Youtube analytics is not tracking the Youtube videos on the site anymore. I dont know why, the video still gets clicked on, and the embedded video does get played on the site.

What should I do with the embed code to make it track the Youtube video again?

How can I track it with Google Analytics if I cant track with Youtube Analytics anymore?

I need some StackOverflow magic...

The code to embed Youtube video on the page is:

<div class="youtube" id="_ynxddD0Eqk"></div>

and the function code on the backend:

    <script>
$(document).ready(function() {
  $(".youtube").each(function() {
    // Set the BG image from the youtube ID
    $(this).css('background-image', 'url(//i.ytimg.com/vi/' + this.id + '/hqdefault.jpg)');
    // Click the video div
    $(document).delegate('#' + this.id, 'click', function() {
      // Build embed URL
      var iframe_url = "//www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=2&wmode=opaque&enablejsapi=1";
      // Grab extra parameters set on div
      if ($(this).data('params')) iframe_url += '&' + $(this).data('params');
      // Build iframe tag
      var iframe = $('<iframe/>', {'allowfullscreen':'allowfullscreen', 'frameborder': '0', 'src': iframe_url});
      // /youtube event tracking
      $(iframe).addClass("media-youtube-player");
      // Replace the YouTube thumbnail with YouTube HTML5 Player
      $(this).replaceWith(iframe);
    });// /click
  }); // /each video
}); // /document ready
 </script>

解决方案

I want to second the proposed solution with Komito Analytics.

Yes, it will be tracked with Google Analytics automatically. Just include the script as described at https://komito.net/integration/:

<script src="https://komito.net/komito.js"></script>

The documentation also reflects default configuration settings, please have a look on them and turn off not needed metrics.

这篇关于Youtube API和跟踪嵌入式视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！