MEDIOCRITY BLOG

【2016年9月ブログ開設〜】月間7万PV達成!!サラリーマンやりながらブログを書く『サラリーマンブロガー』です。MacとiPhoneをこよなく愛します。Hulu&NetFlix&AmazonPrimeで海外ドラマを観る休日は最高!!

ブログ記事の途中離脱多すぎだろ?初心者が読了率を調べる方法を導入

『おまえのブログ記事、ちゃんと読まれてるか?』

私もブログを書き始めて6ヶ月が経ちました。
どの記事がどのぐらいのPV(ページビュー)なのかは、グーグルアナリティクスを見れば分かりますよね?

〜 6ヶ月前 〜

『ヤバ、見ず知らずの人が読んでるぞ、ヤバww』

最初は"ただ読まれている=PVが増える"だけで満足していました。

〜 現在 〜

『最近、1記事5000文字とか普通に書いてるけど、最後まで読まれてんのかな…』

しかし、今現在だと一球入魂いっきゅうにゅうこんで書いたブログ記事が『最後まで読まれてんのか?』と"質"を気にするようになりました。人間って貪欲やねw

▼そんなときに、この記事に出会いました▼
その記事最後まで読まれている?ページの読了率をGoogleTagManagerを利用して取得する方法のまとめ

スポンサーリンク

読了率計測の導入方法

基本的に、らくからちゃ (id:lacucaracha) さんの記事を読めば導入出来ます。
但し、私のようなアホ『なにがなんだがサッパリ分からんわ』状態に陥りました。

だから、"初心者目線で手取り足取り"導入方法を列挙しています。

この記事が『読了率計測のやつ、導入したかったけどよく分かんなくて断念したわw』って方に役に立てばいいな。

Googleタグマネージャーのインストール

Google タグマネージャ公式サイト『いますぐ登録』を押せば、なんとなくで簡単に進んでいきます。

そしてその先に、最初の"初心者つまづきポイント"が隠されてました。

f:id:Mediocrity:20170226215347p:plain

①の『このコードを 内のなるべく上のほうに貼り付けてください。』に関しては

  • (はてなブログの場合)"設定→詳細設定→headに要素を追加"の一番上に貼り付ければいいとのこと!

f:id:Mediocrity:20170226220543p:plain

『よし、出来た!!初心者にも簡単に出来るんやな』

そして②の『開始タグの直後にコードを貼り付けて下さい。』に関しては

  • (はてなブログの場合)"デザイン→カスタマイズ→ヘッダータイトル下"の一番上に貼り付ければいいとのこと!(スマホも同様に)

f:id:Mediocrity:20170226222348p:plain

『なんじゃこりゃあぁwww』

ここから、怒涛の勢いで"ググるググるググる、そしてググる"でした。

unexpected start tag token (iframe) in the frameset phase.
(予期しない開始タグトークン(iframe)がフレームセットフェーズにあります。)
Ignored.
(無視されます。)
unexpected end tag (noscript).
(予期しない終了タグ(noscript)。)
Ignored.
(無視されます。)

まず、何を言ってるのかがサッパリ分からず。

『はあぁ…よく分からんw』

んで、とりあえず続行!!

Googleタグマネージャーの設定

基本的に、らくからちゃさんの記事に書いてある内容を実行すればいいんです。しかし、私みたいなアホだと結構調べながら進めたのでキャプチャを交えて説明します。

f:id:Mediocrity:20170227210959p:plain

まずは、Google Tag Manager(GTM)にログインすると"この画面"になります。左側に配置されているボタンを使って、それぞれの値を設定していきます。

変数の設定方法

f:id:Mediocrity:20170227211825p:plain

(変数)scrollPoint
・名前・・・scrollPoint
・変数の種類・・・データレイヤーの変数
・データレイヤーの変数名・・・scrollPoint
・データレイヤーのバージョン・・・バージョン1

(変数)scrollPointElms
・名前・・・scrollPointElms
・変数の種類・・・データレイヤーの変数
・データレイヤーの変数名・・・scrollPointElms
・データレイヤーのバージョン・・・バージョン1

該当箇所に該当する値を、記入したり選択したりすれば、『scrollPoint』『scrollPointElms』の変数設定が完了です。

トリガーの設定方法

f:id:Mediocrity:20170227222444p:plain

(トリガー)scrollPoint
・名前・・・scrollPoint
・イベント・・・Scroll
・トリガーの種類・・・カスタムイベント
・このトリガーの発生場所・・・すべてのカスタムイベント

(トリガー)scrollPointElms
・名前・・・scrollPointElms
・イベント・・・ScrollElms
・トリガーの種類・・・カスタムイベント
・このトリガーの発生場所・・・すべてのカスタムイベント

(トリガー)DOM Ready
・名前・・・DOM Ready
・トリガーの種類・・・ページビュー - DOM Ready
・このトリガーの発生場所・・・すべてのDOM Readyイベント

そしてトリガーの設定で、2回目の"初心者つまづきポイント"が隠されてました。

イベントと記載されていますが、イベント名のことです!初心者の私だと、言われたことを言われた通りにこなすだけでして…
何を勘違いしたか『イベント名』『名前』と思い込み、"名前にscrollPointElms""イベント名にscrollPointElms"と入力して進めました。

結果、動作せず、丸2日は紆余曲折うよきょくせつしてました

みなさんは、お気をつけて下さい!(笑)

タグの設定方法

f:id:Mediocrity:20170228200443p:plain
f:id:Mediocrity:20170228200500p:plain

(タグ)GA_scrollPoint
名前・・・GA_scrollPoint
タグの種類・・・ユニバーサルアナリティクス
トラッキングID・・・自分のトラッキングID(UA-xxxxxxx-x)
トラッキングタイプ・・・イベント
カテゴリ・・・{{Page URL}}
アクション・・・scrollPoint
ラベル・・・{{scrollPoint}}
非インタラクションヒット・・・真
配信トリガー・・・scrollPoint

(タグ)GA_scrollPointElms
名前・・・GA_scrollPointElms
タグの種類・・・ユニバーサルアナリティクス
トラッキングID・・・自分のトラッキングID(UA-xxxxxxx-x)
トラッキングタイプ・・・イベント
カテゴリ・・・{{Page URL}}
アクション・・・scrollPointElms
ラベル・・・{{scrollPointElms}}
非インタラクションヒット・・・真
配信トリガー・・・scrollPointElms

『GA_scrollPoint』『GA_scrollPoint』はこの通りに記入すれば完了です。

f:id:Mediocrity:20170228201806p:plain

(タグ)scrollPoint
名前・・・scrollPoint
タグの種類・・・カスタムHTML
HTML・・・※下記参照
配信トリガー・・・DOM Ready

『scrollPoint』に関しては、『GA_scrollPoint』『GA_scrollPoint』と異なりHTMLをコピペします。

ここまで終われば、あとは設定したワークスペースを公開して導入完了です!!

f:id:Mediocrity:20170228204520p:plain

無事に完了していると、こんな感じでアナリティクスにイベントが表示されるようになります。

『リアルタイムで離脱ポイントが分かるので、うわ!!スゲーってなりますよ』

読了率計測の導入結果

f:id:Mediocrity:20170228204005p:plain

私の全記事を対象に『最終到達』を目標に設定し、どのぐらいCV(コンバージョン)したか?結果は、約30%です!!
70%の方が途中でどっかに飛んでいっちゃってます。

この数字が多いのか少ないのか、よく分かりませんが、気合を入れて書いた記事が最後まで読まれないのはちょっと残念でした。

さいごに

『みんな、なんで検索するのか?』

『検索することが趣味な人を除けば、ただ情報が知りたいだけですよね?』
『自分が検索窓に打ち込んだ"検索クエリ"に対する"答え"を見つけたいだけ』
『"答え"が見つかったら"離脱"する、見つかりそうになくても見切りを付けられ"離脱"する』

そんなユーザーに対して、求めている情報以上の付加価値を提供して、より満足してもらえるように努力していかなくちゃいけないっすよね!!

以上。