Webデザイナー×リモートワーカー×Apple好きのリンゴが、Apple製品(Mac / iPhone)を中心に格安SIMやゲーム等、好きで興味のある物の情報だけを発信

当ブログについて

筆者について

リンゴプロフィール

Apple製品にハマった人生
Webデザイナー×Apple好き リンゴ

リンゴをSNSでフォローするならこちら


2017/08/17

制作(Web/印刷物)

Post Title

サイトやブログにVideoタグで埋め込んだ動画。再生数を集計する方法は?

  • スポンサーリンク

Webデザイナー”Ringo”動画を使う機会、美容サロンでも増えてきましたね!

Webデザイナー”Ringo”おはようございます。
美容サロンと一緒に働くWebデザイナー、Re:birth DesignのRingo(@rebirth_design)です!毎朝8時に、このブログをアップしています。

ブログやサイトのページ上に、動画プレイヤーを埋め込むことってありませんか?

ブログやサイトを作成する為の言語の規格「HTML5」が登場してからは、動画を埋め込むのも簡単になりました。

画像を埋め込む<img>タグと同じように、<Video>タグを使うことで一瞬で入れられます。

簡単に使える<Video>タグですが、そのままではどのくらい再生されたかっていうのは、わかりません。

…けど、動画がどのくらい再生されたのか知りたくないですか?

というか、僕がつい先日そう思いました。

Googleのアクセス解析「Googleアナリティクス」を使えば、再生回数を簡単にカウントすることができます。

  1. 『アナリティクスで動画の再生数をカウントする方法。』
  2. 『まずはGoogleアナリティクスのページで設定を。』
  3. 『<Video>タグ内にコードを追記。』 
  4. まとめ


アナリティクスで動画の再生数をカウントする方法。

Googleアナリティクスの登録方法や使い方については今回すっ飛ばして、再生数をカウントする方法だけを紹介しますね。



まずはGoogleアナリティクスのページで設定を。

Googleアナリティクスのホームを開いたら、左側のメニュー内にある「管理」をクリック。↓

画面が切り替わったら「目標」をクリック。ページの右側にあるはず。

赤い「新しい目標」ボタンをクリックしましょう。

設定画面に切り替わります。

「メディア再生」にチェックつけて「続行」→後から見て何かわかるように名前をつけて「イベント」にチェックつけて「続行」。

その後は下の画像の様な感じに入力していきます。

ここは画像と同じじゃなくて、自分でわかるように入れていけばOK。

「値」は開けておいてもいいんじゃないですかね。

最後に「保存」を押してGoogleアナリティクスのページでは準備完了。



<Video>タグ内にコードを追記。

カウントしたい<Video>タグ内に、下記の専用のコードを入れます。

<Video>タグ内に入れる

onClick=”ga(‘send’,’event’,’カテゴリー’,’アクション’,’ラベル’,値,);”(赤文字は固定)

例えば、

例えば…

<video src=”hogehoge.mp4″ onClick=”ga(‘send’,’event’,’Video’,’Play’,’TestMovie01’);”></video>

といった感じ。「値」は設定していないので記載しません。

ただ、これだと問題が。

動画が再生されたときにカウントされるのではなく、動画上でクリックしたときにカウントされてしまいます。

だから、

OnClickをOnPlayに変更

<video src=”hogehoge.mp4″ onPlay=”ga(‘send’,’event’,’Video’,’Play’,’TestMovie01’);”></video>

とします。

…すると無事、動画が再生されたときにカウントされるようになります。

無事できていたら、Googleアナリティクスのページの「コンバージョン」から、カウントをチェックできるようになります。

【2018年11月22日】匿名の読者さんからダブルクォーテーションが全角になっていたと間違いを教えていただき、修正しました。ご連絡ありがとうございます!



まとめ

Webデザイナー”Ringo”今回は「サイトやブログにVideoタグで埋め込んだ動画。再生数を集計する方法は?」って話でした。

今後、動画を使う機会はどんどん増えていくと思うので集計をとって次の動きに活かしたいですよね!

ということでまた明日も朝8時に記事を更新しますので、ブックマーク&チェックお願いしますね!

あと、このページをSNSでシェアするのも是非お願いします。ではまた明日!

  • オススメ記事&スポンサーリンク


  • スポンサーリンク

この記事が面白い・役に立ったと思ったら、今すぐSNSでシェアして下さい!記事を書くモチベーションが上がります!

こんな記事にも興味がありませんか?

この記事を書いたのは「リンゴ」

筆者「リンゴ」について

リンゴプロフィール

リンゴをSNSでフォローするならこちら

Apple製品にハマった人生
Webデザイナー×Apple好き リンゴ

当ブログは【Apple製品】【PC&ガジェット】【ゲーム】【自分の仕事】に関する情報を発信。

2015年、Webやガジェットから感じるわくわく感を伝えたくて、ブログを書き始める。

毎日投稿を続け、自分の発信が人の役に立てたこと、月間アクセス数10万超えを達成できたこと、さらに少額ながらお金も稼げたことに喜びを感じる。

ブログ運営を手伝うことを仕事にしようと試みたが大失敗。

現在は自分のスキルを活かして、人の役に立てることを模索中。
そしてWeb関連の仕事に励んでます。

仕事のご依頼・ご相談は問い合わせページ、もしくは各SNSにてお待ちしております。

なお当ブログでは、この先商品やサービスのレビュー記事作成依頼は承りません。

詳細プロフィールを見る

リンゴに仕事を依頼・相談する

  • スポンサーリンク



筆者について

リンゴプロフィール

Apple製品にハマった人生
Webデザイナー×Apple好き リンゴ

リンゴをSNSでフォローするならこちら

ブログ全体の新着記事

No Image

楽しく仕事したい人におすすめ

WordPressで固定ページ・投稿・プレビューすべてのページが…

No Image

Apple好きにおすすめ

【3G回線終了】古いiPhoneを使い続ける事ができなくなった解…

No Image

Apple好きにおすすめ

【画像つき解説】iPhoneでYouTube動画をピクチャインピ…

楽しく生活したい人におすすめ

【半年レビュー】部屋の中で、世界中の風景が見える窓『Atmoph…

No Image

楽しく生活したい人におすすめ

ネットで『ゲームセンターCX』の動画を観る方法。視聴可能だけどお…

Apple好きにおすすめ

Appleのサブスク使ってるなら「Apple One」にまとめた…

新着投稿をもっと見る

制作(Web/印刷物)の新着記事

No Image

楽しく仕事したい人におすすめ

WordPressで固定ページ・投稿・プレビューすべてのページが…

楽しく仕事したい人におすすめ

「ロリポップ!」ユーザー専用ページへログインすると403エラーが…

楽しく仕事したい人におすすめ

【解決】WordPress管理画面にて「ログインはロックされてい…

楽しく仕事したい人におすすめ

僕にも出来た『自作LINEスタンプ』を売るまでの流れ。販売に必要…

楽しく仕事したい人におすすめ

【初心者へ】YouTube動画編集担当の作業環境。おすすめのパソ…

楽しく仕事したい人におすすめ

ハイクオリティなヘッドホンはNG…!?動画編集用のヘッドホン・イ…

「制作(Web/印刷物)」の一覧を見る

ブログ全体の人気記事

Apple好きにおすすめ

【随時更新】Macで遊べるオススメのゲームをまとめて紹介!(iM…

楽しく生活したい人におすすめ

SFC・SS・PS・N64・GC。HDMI接続できないレトロゲー…

Apple好きにおすすめ

もっとMacでPCゲームを楽しみたいアナタへ贈る『Steam』を…

楽しく生活したい人におすすめ

MacはWindowsに比べて、ゲームに向いていない!?その通り…

楽しく生活したい人におすすめ

YouTubeにアップした動画、URLは変えないで動画だけ差し替…

Apple好きにおすすめ

【2020年】あなたは何色派?人気なiPadの本体カラーの店舗毎…


▲最上部へ