LoginSignup
3
0

More than 1 year has passed since last update.

サイト内の動画をGoogleアナリティクスで計測したい(WordPressの場合のおまけ付き)

Last updated at Posted at 2017-11-06

2021年5月18日 追記

今はこんな面倒なことをしなくても Google Tag Manager で設定できるので、この記事のことは忘れて Google Tag Manager の使い方を覚えましょう。
https://tagmanager.google.com/

仕様

  • 動画の再生回数をGoogleアナリティクス(イベントトラッキング)で計測したい
    • WordPressの投稿本文部分で入れた動画も計測したい
    • Youtubeなど外部サイトの動画は含めなくて良い
  • 1回再生したら1カウント。一時停止後の再生は含めない

コード

movie.js
// video ga
var video = $('video');
var video_url = '';
if( video.length > 0 ){
    var isPlay = false;
    video.on('play playing',function(){
        if( isPlay === false ) {
            video_url = $(this).attr( 'src' );
            // Googleアナリティクス analytics.js の場合
            if ( typeof ga === 'function' ) {
                ga( 'send', {
                    hitType: 'event',
                    eventCategory: 'Videos',
                    eventAction: 'play',
                    eventLabel: video_url
                });
            }
            isPlay = true;
        }
    });
    video.on('ended',function(){
        if( isPlay === true ) {
            isPlay = false;
        }
    });
}

WordPress本文部分にアップロードした動画を埋め込んだ場合、単純な video タグではなく mediaelement.js が使われているので、イベントに playing を併記するのがポイント。
(mediaelement.jsを使ってなければ入れる必要なし)

同一ページ内に複数の動画ある場合。

video タグにIDを付与するなどして、再生フラグの変数を動的にすれば良いと思うよ(未検証)

現場からは以上です。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0