～目次～
動画の再生数をカウントする？
YouTubeでは、動画の再生数が重要です。
動画をYouTubeにアップロードすれば、再生数を知ることができますが、YouTubeにアップロードせずに動画の再生数をカウントするにはどうすればよいでしょうか？
そんな要望があったので、試行錯誤して応えてみました。
今回はその方法をご紹介します。
準備すること
１．動画を再生するためのWEBサイトの準備
今回は、WordPressを利用したWEBサイトを前提とします。
WordPressの導入の仕方はこちらをご覧ください。
２．プラグインのインストール
以下のプラグインを利用します。インストールを実施してください。
「Contact Form 7」
→非常に有名なプラグインです。
お問い合わせフォームなどを簡単に作れます。
「Contact Form CFDB7」
→作成したフォームから送信された内容を
WEB上で一覧表示できて、
さらにCSVファイルとしてダウンロード
することができるようになります。
「Scripts n Styles」
→作成したページにCSSやJavaScriptを
記述することができるようになります。
「Elementor」
→投稿や固定ページの作成時にいろいろな
パーツを利用して視覚的にWEBサイトが
構築できるようになります。
「Essential Addons for Elementor」
→Elementorで利用できるパーツが増えます。
動画が閲覧できるページを作成する
固定ページ、投稿どちらでもよいので新規ページを作成します。
作成出来たら、Elementorのパーツから「Sticky Video」を選択してください。
このパーツは、動画の再生速度も変えられるなかなか使える動画再生フォームです。
画面に反映出来たら、動画を選択しましょう。
「Source」から「Self Hosted」を選択して、動画をアップロードしたURLを「External URL」に入力してください。
他の変更はお任せです。サムネイルを指定したい場合には「Image Overlay」にて指定することができます。
動画が再生されたことを通知するフォームを作成する
動画の再生数をカウントする～で調べると、Googleアナリティクスが有名らしいですが、登録と設定が面倒です。設定しても再生回数拾わないし。。。
データベースに登録していく～も考えましたが、WordPressを使用しているのでなかなか面倒くさいです。
そこで、今回は動画が再生されたら「Contact Form 7」を使用して、メールで通知する仕様としました。
追加のプラグインを入れておけば、何回通知されたかが一目瞭然ですし、CSVとして出力できるので、カウントが非常に楽です。
作り方ですが、WordPressの「お問い合わせ」＞「新規追加」をクリックして下記のように「フォーム」の内容を作成してください。
[text title id:movieTitle]
[submit id:submit]入力が完了したら、「保存」ボタンをクリックして内容を保存してください。「メール」の内容は送信先やメールの内容の設定になります。任意の値で設定してください。
ここまで、完了したら「ショートコード」をコピーしておきます。
動画を再生するページにフォームを埋め込む
動画を埋め込んだページをElementorで編集を選択して開きます。
そして、「ショートコード」を動画の下にドラッグ＆ドロップして設定します。
設定出来たら、先ほどコピーしたショートコードをペーストしてください。
完了したら「更新」ボタンをクリックして画面を保存しておきましょう。
さて、このままだと動画の下に、フォームが表示されたままでかっこ悪いです。
次の目的としては、このフォームを見えないようにすることです。
フォームを隠す
作成したページをプレビューしてください。
そして、ブラウザの開発者ツールを開いてフォームの要素にフォーカスを当てましょう。
すると、フォームのdiv要素にidが設定されているのが分かります。
どうやら、ページ、フォームの数によってidが振られるようです。
このidをコピーしてください。
画面左上の三本メニューをクリックして「ダッシュボードに戻る」をクリックしてください。
Elementorを終了させます。
通常の編集画面になると画面下に「Scripts n Styles」のプラグインによりCSSやJavaScriptが記述できるエリアが表示されています。
「Styles」タブをクリックして下記内容を入力してください。
#コピーしたid {
display:none;
}画面右上の「更新」ボタンを押してCSSを登録して、再度、画面をプレビューしてみると、フォームが非表示になっているはずです。
もし非表示になっていなければ、コピーするidを間違っているかもしれません。
再度、開発者ツールで確認してみてください。
画像が再生された時の処理を記述する
プレビュー画面で、再度開発者ツールを開いてください。
次に動画のidを取得します。
「Sticky Video」で動画を埋め込むと任意のidが振られます。
そのidをコピーしてください。
idが判明したら「Scripts n Styles」にてJavaScriptを記述していきます。
以下の内容を記述してください。
window.onload = function () {
const movieTitleEle = document.getElementById('movieTitle');
const submitButton = document.getElementById('submit');
function submitClickAction(title) {
movieTitleEle.value = title;
submitButton.click();
}
const video01 = document.getElementById('コピーしたid');
let playFlg1 = false;
video01.onplay = function () {
if (playFlg1 === false) {
submitClickAction('動画のタイトルを入力');
playFlg1 = true;
}
};
};内容を簡単に説明すると、
「画面の読み込みが完了したら、
フォームの要素を取得します。
関数「submitClickAction」を記述します。
内容は、動画タイトルをフォームのタイトル欄に入力して、送信ボタンを押下する。というものです。
動画の要素を取得します。
フラグをfalseで登録します。
動画の再生開始時に関数「submitClickAction」を実行して、フラグをtrueに変更します。」
といった内容です。
フラグを利用したのは、再生のたびに通知がされないように、初回の再生時のみ通知をするためです。
これで、動画が再生されたときに、メールでの通知がされるようになります。
動画を再生してみて、ダッシュボードのメニューの「Contact Forms」をクリックしてみてください。
動画再生フォームのカウントが増えていれば成功です。
これで、何回再生されたかが一目瞭然です。
また、CSVファイルをダウンロードできるので集計も非常に楽にできるようになりました。
まとめ
動画の再生数のカウントに関して、YouTubeが有名すぎてなかなか情報がなかった。
Googleアナリティクスが有力だったが、試してもカウントしてくれなかったので、確実な方法を模索しました。
そんな中で、WordPressのプラグインを利用してカウントする方法を考えたので、ぜひ流用してみてほしい。
５つのプラグインの利用と、CSSとJavaScriptの簡単な記述だけで実現可能です。
また、今回は紹介していないが、動画が再生完了したときにも同様の処理をすることで、何回最後まで閲覧されたかをカウントすることも可能となっています。
videoタグのイベントを利用すれば他にもいろいろできそうな気がします。
この記事を参考に考えてみてください。
