Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@gatespace

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

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を付与するなどして、再生フラグの変数を動的にすれば良いと思うよ(未検証)

現場からは以上です。

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What is going on with this article?