一生懸命に記事を書いたりコンテンツを作り込んでサイトに公開した後、ちゃんと最後まで読んでもらえたかな・・・ってとても気になりませんか？
ページ内のコンテンツのどの辺まで見てもらえたかな？
逆にページ内で離脱に繋がったセクションはどこかな？
というのがデータとして取得できたら便利だと思いませんか？
個人サイトであれば単純な興味として、事業でコンテンツを公開している場合なんかは、コンテンツの改善ポイントの発見に役立てることができそうですね。
この記事では、設定画面のキャプチャを使用しながら下記の計測をするための手順をご紹介しています。
- Googleタグマネージャを使って
- ページ内の見出し要素（h1〜h6）が表示された時に
- 「見出し要素の名前」と「見出しのテキスト」を
- Googleアナリティクスのイベントで計測する
ゴールのイメージはこんな感じです。
どこまで読んでもらえた？を計測する「読了率」と「表示要素」の違い
読了率は、「ページ全体でどれくらい表示されたか(読まれたか)の指標」。読了率100%であれば「全部読んでもらえた」ということになります。
読了要素は、「ページ内のどの要素が表示されたか(読まれたか)の指標」となり、ページ全体からの相対的な位置ではなく、個別の位置を取得するものです。「全部読んでもらえた」と見なす箇所を自分で決めることができます。
見出し要素で読了を計測すると、何がいいかというと、見出しテキストをアナリティクスに記録するので、アナリティクスの画面を見た時におおよそどの辺りまで読まれたかが直感的に分かる点と、該当ページを見ればすぐに、「ああ、ここが表示されたのか。この要素あたりで離脱が多いのか。」とピンポイントで分かる点です。
このセクションで離脱が多いな、とか、ページの最後に置いた申し込みボタンまで全然到達してないじゃない！確実に読まれているセクションにも設置いた方がいいよね。とか具体的な箇所を改善する際のヒントになりえます。
読了率の場合は、そのページの長さを100%とした場合、何%まで閲覧されたかを取得します。
単純に「このページの読了率は何％。サイト全体では平均何％」というレポートが欲しい場合はこれでいいのですが、コンテンツの離脱ポイントを明確にして改善点を見出すには、要素で取得する方がわかりやすくなります。
この記事では、h1〜h6などの見出し要素で計測をする方法を採用していますが、タグマネージャでは、様々な要素、属性に対応していますので読み替えてご覧いただけたらと思います。
見出しタグに必ずしもclass属性やid属性が設定してあるとも限らないので属性値で対応しようとすると、既存記事が100記事とかあったら全記事を修正する必要がでてきます。
それは手間が多過ぎる・・・というところから、単純に見出しタグそのもので取得してしまおうという魂胆です。
タグマネージャから読了要素取得の設定の前に
Googleタグマネージャのアカウント取得済みであり、タグマネージャを通してのアナリティクスページビュー計測設定が済んであることを前提としています。
もし、上記が未設定でしたら、下記記事をご参考ください。
まずは変数を作ろう！必要な変数は3つ
変数を作るときは、左の変数メニューをクリックして、右側に表示される変数設定エリアのどこでもいいのでクリックするとGTMであらかじめ設定されている変数リストから条件にあったものが選択できます。
それでは早速それぞれ設定していきます。
見出しテキストを取得する変数の設定
この変数は、<h3>見出しのテキストを取得する方法<h3>という見出しがあった場合、この中の「見出しのテキストを取得する方法」の部分をタグマネージャで用意されている変数で取得します。
要素のテキストは「自動イベント変数」で取得できます。
変数タイプのリストの中の「ページ要素」の中の「自動イベント変数」をクリックします。
設定画面が表示されますので「変数タイプ」を「要素テキスト」にします。
これだけで要素内のテキストが取得できます。便利ですね！
設定ができたら、変数名にわかりやすい名前をつけて保存します。
例では、「tagTxt」としています。
見出し要素のタグ名を取得する変数の設定
この変数は、<h3>見出しのテキストを取得する方法<h3>という見出しがあった場合、このタグ名である「h3(H3)」を、タグマネージャで用意されているデータレイヤー変数を使って取得します。
変数の作成で、変数の種類を「データレイヤーの変数」に指定します。
設定画面が表示されるので、データレイヤーの変数名に「gtm.element.tagName」を入力します。
自動イベント変数ではなく、データレイヤーの変数で取得する理由は、タグ名がうまく取れないためで、詳しくは下記記事に記載しています。
設定ができたら、変数名にわかりやすい名前をつけて保存します。
例では、「tagName」としています。
アナリティクスのプロパティIDを代入した変数の設定
この変数は、あらかじめアナリティクスのプロパティIDを代入しておく変数です。
変数にアナリティクスのプロパティIDを登録しておくことで、タグマネージャのタグやトリガーを設定する際に使い回しがきくようになります。
都度アナリティクスのプロパティIDを調べて入力（またはコピペ）する必要が無くなるメリットがあります。
変数タイプのリスト内の「ユーティリティ」の「Google アナリティクス設定」をクリックします。
設定画面が表示されますので、「トラッキングID」部分にアナリティクスのトラッキングIDを入れます。「UA-」から始まるIDです。
Cookieドメイン部分は「auto」のままで良いかと思います。
サブドメインでコンテンツを分けている場合などでアナリティクス計測時のCookieを共通化したい場合などに設定が必要な箇所です。
設定が完了したら、わかりやすい名前をつけて保存をします。
例では、「webru-TrackingID」としています。
変数の設定は以上です。
こんな感じになりました。
赤で囲った3つが今回作った変数です。
変数名は、それぞれつけた名前に読み替えてください。
変数の設定が完了したら、次は設定した変数を使ってトリガーの設定をします。
トリガーの設定。簡単に要素の取得ができるようになりました
GTMで「スクロール距離」「要素の表示」のトリガーが用意されたので、以前のようにスクリプトをGTMに登録する必要が無くなりましたので、とても簡単に設定ができるようになりました。
スクロール距離は読了率を取得するのに最適ですが、今回の要件では「要素の表示」使っていきます。
早速、トリガーの設定から下記のように設定をしてください。
トリガーの新規作成を行います。
左のトリガーメニューを押して、右側の「新規」ボタンをクリックします。
右側に表示されたエリアのどこでも良いのでクリックします。
クリックするとトリガーのタイプの設定画面が開きます。
トリガータイプの一覧の中の「ユーザーエンゲージメント」内の「要素の表示」をクリックします。
「要素の表示」トリガーに合わせた設定項目が表示されますので、それぞれ設定を行います。
設定項目が複数あるので、それぞれ後ほど説明をしていますが、下記のような設定で概ね良いかと思います。
| トリガーの種類 | 要素の表示 |
|---|---|
| 選択方法 | CSSセレクタ |
| 要素セレクタ | h1,h2,h3,h4,h5,h6 又は .contents h2,.contents h3,.contents h4など〔詳しく〕 |
| このトリガーを起動するタイミング | 1要素につき1度〔詳しく〕 |
| 視認の最小割合 | 50〔詳しく〕 |
| 画面上での最小表示時間を設定 | なし〔詳しく〕 |
| DOMの変化をモニタリング | なし〔詳しく〕 |
| このトリガーの発生場所 | すべての表示イベント〔詳しく〕 |
設定が完了したらわかりやすいトリガーの名前をつけて保存します。
トリガーの名前はなんでも問題ありません。
今回の例では「見出到達要素トリガー」としました。ちょっと変な名前ですね・・・。
上記はオーソドックスなオススメの設定内容のみ記載しています。
各オプションについては、どうして今回は利用しなかったのかを含めて下記に記載していますので必要に応じて設定をしてみてください。
各項目の説明が長いので、オーソドックスな設定でいいや！って場合は読み飛ばして次の手順に進んでいただいても問題ありません。
次の手順：設定した変数とトリガーを使ってタグの設定をする
要素セレクタの設定はどうする？
要素セレクタの設定は、CSSセレクタの書き方と同じで問題ありません。
例では、単純に「h1,h2,h3,h4,h5,h6」と指定していますが、ブログなどの場合、サイドバーなどにも「h2」や「h3」が含まれる場合があります。
cssセレクタを利用できることで、絞り込みを行うことができますので、メインとなるコンテンツ部分を「div class=”contents”」などでラップしている場合は、
「.contents h1,.contents h2,.contents h3・・・」といった書き方ができます。
「div id=”contents”」でラップしている場合は同様に
「#contents h1,#contents h2,#contents h3・・・」といった書き方ができます。
このブログの場合は、
「.single .entry-content h2,.single .entry-content h3,.single .entry-content h4」
と指定してあり、個別ページのbodyに指定してあるclass「single」でラップされていてかつ、記事そのものをラップしてあるclass「entry-content」の中にある、「h2」「h3」「h4」までを取得しています。
トリガーを起動するタイミングはどうする？
トリガーを起動するタイミングは3つあります。
それぞれの動作は下記の通りです。
- 1ページにつき1度
- 複数の該当要素があっても、1度しか実行されません。今回のページ内の「各見出しタグの内容を記録」する用途の場合、最初に表示される見出しタグしか記録されないことになります。よって今回の要件では使用しません。
- 1要素につき1度(今回はこれを使用)
- 設定した各要素に対して、1度実行されると、それ以降は実行されません。
今回の要件でいうと、ページの上部から順に見出しタグが表示される都度トリガーが発火し、ページの下部に到達後、再度ページの上方に向かってスクロールをして同じ要素が表示されたとしても、実行されません。
ページ内で何度上下に移動しようとも、1つの要素で記録されるのは1度のみとなります。
「どの要素で離脱が多かったか」を計測するには向いている選択肢です。どの要素が一番よく見られているか、という視点で計測をしたい場合は次の「各要素が表示されるたび」が良いでしょう。
- 各要素が表示されるたび
- そのページ内で何度上下にスクロールしても、該当要素が表示される度にトリガーが発火します。その要素が表示される都度、アナリティクスのイベント数がどんどん加算されていく形になります。
どの要素が一番よく見られているか、という視点で計測する際に向いていますが、後述するその要素の最低表示時間の指定と組み合わせるのが好ましいと思います。
興味本位でくるくる上下スクロールをされてしまうと、本当に読んでいるのか単に意味なく要素が表示されただけなのか、というのが判断できないためです。ただし、今回の「見出しタグ」でいうと、見出しタグは大抵1行が2行であり、その下に文章や画像が続く形になる場合が大半ですよね。
そうすると、記事を読み進めるためにスクロールが発生し、見出しタグが一定時間表示されず画面から見切れてトリガーが発火しない可能性があります。今回の見出しタグでの計測にはあまり向いていない選択肢です。
このオプションは、「どの要素が一番よく見られているか（かつきちんと読まれているか）」を計測する場合に、そのセクション全体を要素で囲い、その要素に対してトリガーを設定するのが好ましいかと思います。
視認の最小割合はどうする？
「視認の最小割合」とは、トリガーとなる要素がその要素の全体の何%表示されたらトリガーを発火させるかを指定するオプションです。
公式の説明では以下のように記載されています。
選択した要素の何割が画面上で視認可能だったらトリガーを起動するかを指定します
例えば高さ600pxの要素をトリガーに指定して、割合を50にしている場合、300pxが画面上に表示されていれば、視認されたとしてGTMを通してアナリティクスにイベントとして記録されます。
今回の目的である、見出しの読了を取得する場合、領域自体は1行から2行程度なので、「50」の設定で良いかと思います。
画面上での最小表示時間を設定はどうする？
公式の説明では以下のように記載されています。
選択した要素が画面上でどれくらい長く視認可能だったときに、トリガーを起動するかを指定します。この時間は1つのページで累積してカウントされます。たとえば、5,000ミリ秒間視認可能だった要素が一度視界から消え、再び5,000ミリ秒間視認可能となった場合、画面上での合計表示時間は10,000ミリ秒とカウントされます。
今回の要件では単純に見出しが表示された際にトリガーを起動させるため最小表示時間の設定はしません。
文章を読んでもらえたか、の指標を取る際に、文章要素に対して最小表示時間を設定するときに便利なオプションです。
DOM の変化をモニタリングとは？
JavaScriptなどで、ボタンをクリックしたら要素を追加する、といった実装がある場合、その追加されたDOM要素に対して計測を行うオプションです。
今回の要件では、既に表示されている見出し要素に対してのトリガーになりますので利用しません。
トリガーの発生場所の指定
トリガーの発生場所を限定する際に利用するオプションです。
例えば、URLだったり、データレイヤー変数に応じてトリガーの起動を制御するといった使い方ができます。
ここでは1例のみにしますが、例えば、http://example.com/category/以下のみトリガーを起動する、といった場合は、
Page URL：先頭が一致：http://example.com/category/
といった感じになります。
ほとんどのサイトの場合、各ページで異なる見出しが発生するのはメインコンテンツであり、メインコンテンツは何かしらのcssやid属性を持っているものと思われます。
こういった場合はトリガーの発生場所を限定せずに、要素セレクタで指定すれば良いかと思います。
例えば、「<div class=”main-contents”>」「<main class=”contents”>」といった属性を持っていれば、要素セレクタに「.main-contents h2,.main-contents h3,.main-contents h4」といったように指定すれば良いかと思います。
このブログの場合は、データレイヤー変数の値によってトリガーの発生場所の指定を行なっています。
このブログはWordPressを利用しており、ログインユーザーが「administrator」の権限を持っている場合は計測をしたくないためトリガーを起動しない設定にしています。
データレイヤー変数を利用した方法の記事がありますのでご参考ください。
ただし、この下記記事はページビューを測定する例のものです。読み替えてご覧いただけましたらと思います。
設定した変数とトリガーを使ってタグの設定をする
最後の手順です。
これまで用意してきた変数とトリガーを利用して、配信タグの設定をしていきます。
作ったタグを公開すればすぐにデータを取得できるようになります。
キャプチャが多いのて手順が多く感じられますが非常に簡単なのでご安心ください。
タグタイプの選択
まずは、左のメニューからタグメニューをクリックします。
上部にタグ設定、下部にトリガー設定画面が出ますのでまずはタグの設定をしていきます。
タグ設定エリアのどこでも良いのでクリックしてください。
クリックすると、タグタイプの選択リストが出ます。
タグリストの中の一番上にある「ユニバーサルアナリティクス」をクリックします。なお、旧バージョンのアナリティクスを利用している場合は従来のGoogleアナリティクスをクリックしてください。
よくわからない場合は、最近設定したアナリティクスであればほとんどの場合ユニバーサルアナリティクスですのでユニバーサルアナリティクスをクリックしてください。
イベントタイプとイベントカテゴリの設定
次に、アナリティクスのイベントトラッキングを利用しますので、トラッキングタイプを「イベント」にします。
イベントを選択すると、イベントトラッキングで記録する各種データの設定項目が表示されます。
カテゴリ名を例では「到達要素」としました。
カテゴリ名はアナリティクスのイベントカテゴリのことで、集計する際にわかりやすい名前をつけて分類をするためのものです。
カテゴリ名を「到達要素」とした場合のアナリティクスでの表示は下記の通りです。
イベントアクションとイベントラベルの設定
次に、「アクション」「ラベル」を設定します。
アクションもラベルも、カテゴリ名同様、アナリティクスの「イベントアクション」と「イベントラベル」の設定になります。
アクションとラベルは、変数を利用して設定をします。
それぞれ、項目の右側にある「＋」マークをクリックして設定を行います。
クリックすると、変数一覧が出てきますので選択していきます。
まずアクションは、ページのパスを登録します。利用する変数は、GTMであらかじめ設定されている「Page Path」を利用します。
サブドメインを利用していて同じプロパティで計測をしている場合などは「Page URL」の方が良いかもしれません。
リストから登録しない場合は{{Page Path}}と入力してください。
次にラベルは、先ほど作成した、二つの変数を利用します。
例で付けた名前で言うと、「tagName」と「tagTxt」の2つです。
リストから登録しない場合は{{tagName}}:{{tagTxt}}と入力してください。
見やすくするために間にセパレーターとして「：」を入力しています。
アクションとラベルを上記のように設定した場合、アナリティクスのイベント計測では下記キャプチャのような表示になります。
「値」の項目は今回は利用しません。
非インタラクションヒットの設定
次に、「非インタラクションヒット」の設定を「真」にします。
非インタラクションヒットとは？
非インタラクションヒットは、ざっくり言うとこのイベントが発生した際に、ページの遷移が発生したと見なすか否か、という設定です。
実際にはページ遷移がなくとも、遷移があったと同等の意味を持つ動作をユーザーがした場合に、この値を「偽（False）」にしておけば、アナリティクスの直帰としてカウントされなくなります。
「ページ遷移ではない＝非インタラクションヒット」
「ページ遷移とみなす＝インタラクションヒット」
今回でいうと、非インタラクションヒットを偽(False)、つまり見出しタグが表示されるたびに、ページ遷移があったと見なしてしまうと、直帰率が0になってしまいます。
単に要素が表示されたに過ぎないので、今回は「真」として、このタグで計測されるイベントでは直帰率に影響を与えないようにしておきます。
この値を真にしても、この要素の表示の集計とは別に、ページビューの計測タグを設定していればユーザーが他のページを閲覧した場合などはきちんと記録されますのでご安心ください。
次に、「Googleアナリティクス設定」に先ほど作成したトラッキングIDを代入した変数を指定します。
ここまでの設定は下記キャプチャのようになります。
「このタグでオーバーライド設定を有効にする」「詳細設定」については今回は利用していません。
以上の設定が完了したら、最後にトリガーを作成したものに設定します。
使用するトリガーの設定
タグ設定の下段のトリガー領域のどこでもいいのでクリックします。
クリックすると、作成したトリガー一覧が出ますので、今回の例でいうと「見出到達要素トリガー」をクリックします。
以上で設定完了です。
タグにわかりやすい名前をつけて、「保存」をクリックします。
今回の例では、タグ名を「到達要素計測タグ」にしました。
お疲れ様でした！
以上でタグの設定は完了です。
ちゃんと計測されるか、動作をプレビュー機能の確認してみましょう。
動作しているかプレビューで確認しみよう！
GTMのプレビューモードを起動します。
プレビューモードになると、下記のような表示になります。
この状態になったら、サイトを表示させます。
下部にデバッグペインが表示されています。デバッグペインがなければキーボードのF5で更新してみてください。
「Tags」タブの中に今回作成したタグ「到達要素計測タグ」があるので、クリックしてみます。
このタグのデータが表示されます。
タグ名とテキストが正常に取得できているのがわかります。
左側にある「gtm.elementVisibility」が見出しタグが表示されることにトリガーが起動したイベントです。
ページにある見出しの数と一致しているかなどを確認してみてください。
アナリティクスでも確認
「リアルタイム＞イベント」でレポートを表示し、「イベント（直前の 30 分間）」をクリックします。
カテゴリ名をクリックすると、取得されたタグとタイトルの一覧が表示されます。
これで正しくアナリティクスでデータが取れていることが確認できました。
タグを公開して実稼働させよう
Googleタグマネージャに戻り、タグを公開します。
タグの公開をしなければ、データを取得できませんので設定が完了したら必ず公開作業をしましょう！
ワークスペースの右上にある「公開」ボタンをクリックします。
バージョン管理画面が表示されます。
何も入れなくても公開できますが、バージョン管理をする場合はバージョン名と説明を入れておくと良いかと思います。
もう一度「公開」ボタンを押すと、トリガーに応じてタグの配信が開始されます。
作業が終わったら不要であればプレビューモードを終了しておきます。
プレビューモードがオンのままだとずっとペインが出ているのでとっても邪魔になってしまいます。
以上でGoogleタグマネージャーからページ内の見出し要素をアナリティクスのイベントで計測する手順は終わりです。
書いた記事が、どこまで読んでもらえたか、どこで離脱となってしまったかがわかるのは、コンテンツの見直しにとっても役立ちます。
何よりも、最後まで読んでもらえた記事が多くなってくると、モチベーションの維持につながります。
わたしが務めているWEB制作会社ではクライアントサイトでも導入しており、明確な改善ポイントが数値でわかるようになるため、コンテンツの改善や見直しを提案しやすくなります。
「見える化」をすることでクライアント様のコンテンツ改善への興味や意欲を引きやすく、クライアントさまと一緒にコンテンツを成長させることができています。
何故見直しが必要なのか、を納得していただきやすく、具体的なポイントを数値とともに提案することで稟議も通りやすくなるようです。
改善の結果も数値として現れるため時に恐ろしくもありますが大抵喜ばれています。
参考になりますように！
コメントを残す