- ブレッドクラム
-
- HOME
- BtoBマーケティングコラム
- 初級・実践 GA4、GTMの設定方法紹介!ユーザーアクション視点のコンテンツ評価レポートを作成してみよう
BtoBマーケティングコラム 初級・実践 GA4、GTMの設定方法紹介!ユーザーアクション視点のコンテンツ評価レポートを作成してみよう
2024年3月29日
![](img/index/pic01.jpg)
Index
ユーザー行動中心の評価指標にマインドチェンジしよう
これまでのGoogleアナリティクス(UA)からGA4になり、ページビューが基本のユニバーサルアナリティクスからイベントで統一されたGA4になりました。
UAまではページビューとイベントは別のテーブル(箱)に入っているという考え方で、ページビューが基本となり、イベントは追加機能的な存在でした。しかしGA4では、ページビューやクリックも全てイベントとして並列に並ぶという設計思想に変わりました。そのため、GA4ではPVも一つのイベントとして統一されます。
![](img/index/pic02.jpg)
従来のGoogleアナリティクスでは、コンテンツを評価する際には、コンテンツPV数やセッション数などのトラフィック中心の評価方法でした。コンテンツPV数がいくら以上あるか、前月に比べてPV数が増加したか、といったことがコンテンツ評価に直結していたのです。
しかしGA4では、ユーザーがコンテンツを理解しているか、動線のリンクをクリックしているかなどのユーザー行動を中心にコンテンツを正しく評価することができるようになりました。GA4を使いこなすためには、トラフィック中心の評価から、ユーザーの行動(アクション)を中心としたコンテンツの評価へのマインドチェンジが非常に重要です。
そこで今回の記事では、Googleタグマネージャーを正しく設定し、コンテンツをユーザーアクションで評価できるようになるための設定方法について解説します。
コンテンツを評価する指標を考える
ユーザー行動を中心とした評価指標では、コンテンツを評価する際に、閲覧数に加えて、読了イベントとしてコンテンツを最後の方まで閲覧してくれたかというような、コンテンツの内容をユーザーが理解したというアクションを指標として取得することが重要です。
例えばAというページから製品ページへのリンクが貼ってあるとします。これまでは、Aというページの効果を測定する際はリンク先の製品ページのPV数で評価していました。しかし今後は、可能な限り「Aページに貼っている製品ページへのリンク」のリンククリック数で評価していきましょう。
お問い合わせフォームの場合も同じです。従来は、お問い合わせフォームのPV数で効果測定をしていた方も多いかと思います。しかし今後は、送信ボタンのクリック数で効果を測定していきましょう。
それぞれのページには異なる目的があります、ユーザーに次のステップに進んでもらうことを目的としたページや、じっくり読んでいただいて、理解していただくことを目的としたページなどです。そこで、それぞれのページごとに設定している目的をユーザーのアクションに落とし込んでいくことが必要です。
では、何がユーザー行動中心の評価指標としてコンテンツの評価指標になるのでしょうか。
目的は、そのページを閲覧しているユーザーにどのようなアクションをしてほしいかによって変わります。
例えば事例ページで、次のステップとしてセミナーの申込みやサービスの問い合わせをしてほしいというのが目的の場合を考えてみます。この場合、ページの最後にセミナーへの案内やお問い合わせフォームなどを掲載して「お問い合わせはこちら」などのテキストにリンクを貼ることが多いと思いますが、記事のリンククリック数を指標として、ユーザーが次のステップに進んだかどうかを判断することが可能です。
また、記事コンテンツであれば、コンテンツを読んで理解してもらえたかどうかのアクションが「ページを最後まで読んでもらえた」になるかもしれません。その場合、「コンテンツの90%までスクロールしたら読了イベントが発生する」という形でイベントを取得しコンテンツを評価することも有効です。
また、画面の90%までスクロールという取得方法以外にも、ページの記事部分の最後まで閲覧されたら読了と見なすというイベントの取得方法もあります。
![](img/index/pic03.jpg)
何をもってコンテンツを理解してもらえたとするのか、次のステップに進んだとするかを設定し、それをユーザーの具体的なアクションに落とし込むことが、GA4でコンテンツを評価する上では重要になってきます。
今回は、実例として次の3つの指標について設定する方法を解説します。尚、今回はGA4やGoogleタグマネージャーは既に利用されているサイト向けの解説とし、GA4やGoogleタグマネージャーの初期の導入方法については割愛します。
![](img/index/pic04.jpg)
①読了イベント GA4「scroll」イベント
GA4「scroll」イベントは、ページの90%までが表示されたことを確認するイベントのことです。GA4の設定だけでイベントが取得できるため、比較的設定が簡単です。
早速設定していきましょう。まずはGA4のプロパティに進み、「管理」「データストリーム」をクリックしてページを開きます。
![](img/index/pic05.png)
イベント拡張計測機能の部分で「スクロール数」が表示されていることを確認します。表示されていない場合は、右端の歯車アイコンをクリックして「拡張計測機能」を開き、「スクロール数」がオンになっているかを確認しましょう。
![](img/index/pic06.png)
スクロール数がオンになると、イベントを取得できるようになります。
設定が完了したら、翌日以降にイベントが発生していることを確認しましょう。
![](img/index/pic07.png)
ちなみに、ファーストビューで全画面が見えてしまう場合はスクロールしなくても「scroll」イベントが飛んでしまうという弊害はあります。ただ、おおよそイベントを取ることはできるため、ぜひ活用してみてください。
②表示イベント Googleタグマネージャーで特定の要素を表示したことを取得
サイトによって動きやコーディングルールも違うため、あくまで一例としてみていただきたいのですが、スクロールをして「ここまで読んでもらえれば読了とみなして良いだろう」という箇所をGoogleタグマネージャーを使ってイベントとして取得します。
弊社のページを例に説明を進めます。下記のページをスクロールしていただくと、このような箇所が出てきます。
-
参考リンク:
アネスト岩田株式会社:製品サイトリニューアル
![](img/index/pic08.png)
今回は、大きくデザインも変わっているこの部分でイベントを取得します。
ページ上の「課題の真因を〜」の部分を示すコードが下記になります。
この部分をコピーしてメモ帳か何かにペーストしておきましょう。
![](img/index/pic09.png)
次に、Googleタグマネージャーに進みます。
新しく作業をする時には、ワークスペースを新しく作りましょう。ここでは、「ページの読了設定」という名前のワークスペースを作ります。
![](img/index/pic10.png)
・変数を設定
「組み込み変数」画面を開き、クリックを確認します。画像のように、Click Element、Click Classes、Click ID、Click URL、Click Textにチェックを入れます。
![](img/index/pic11.png)
・トリガーを設定
続いてトリガーを設定します。今回は新規のトリガーを作成します。
ここでは、「scroll_finish_reading」という名前にしました。
![](img/index/pic12.png)
「要素の表示」を選択し、どのページで発生するかについて設定します。
全ページで発生するのであれば、すべての表示イベントでも構いません。
・要素の表示
IDもしくはCSSセレクターで設定ができます。
詳しい設定方法については割愛しますが、検索していただくと解説しているサイトや動画が多数ありますので、参考にしてください。
![](img/index/pic13.png)
続いて、「トリガーを起動するタイミング」について設定します。
1回のスクロールで読了の場合は、「1ページにつき1度」に設定しておくのが望ましいでしょう。「詳細」については、セクションの何パーセントが表示されたタイミングでイベントを取得するかを設定する箇所です。
この設定により、ポートフォリオのディレクトリ配下のページで、このセクションで設定されているクラスの入っているセクションが1ページに1度表示されるたびにイベントが発生するというトリガーを作りました。
・タグの作成
タグも新規で作成します。ここでは、「scroll_finish_reading」という名前にしました。
・測定ID
自社の測定IDを入れてください。測定IDがわからない場合は、「管理」から「データストリーム」を開くと測定IDが記載されています。
・イベントの名前
こちらも「scroll_finish_reading」とします。
![](img/index/pic14.png)
イベントパラメーターは必要があれば適宜設定をしてください。今回は割愛します。
・トリガー
先ほど設定した「scroll_finish_reading」を選択し、設定します。
![](img/index/pic15.png)
設定が完了したら、プレビューモードで実際に動作するかを確認してみましょう。
GTM上でプレビューをクリックします。
該当のページのURLを入力してプレビューモードを開きます。
デバック用のログが表示されるページと、サイトが表示されます。
サイト側のページをスクロールすると、ログが表示されるページ内のTag Firedに「scroll_finish_reading」が発生しているのが分かります。
![](img/index/pic16.png)
スクロールした際に表示するEvent VisibilityにTag Firedに「scroll_finish_reading」が表示されていれば操作は完了です。
③記事内リンククリック GTMで特定エリアのaタグクリックを取得
続いて、GA4デフォルトでは取得できないサイト内へのリンククリックのクリック数を取得するケースです。ページ内のどの箇所でクリックをしたのかからコンテンツを読んで遷移したという判定をする際の設定方法について解説します。
まずは各ページのソースを確認します。今回は、ヘッダー・フッターのクリックは除外します。
イントリックスのサイトでは、<main id=”Main”>というタグで括られた箇所が記事部分という設定です。
![](img/index/pic17.png)
サイトによってはdivがメインタグの役割をしている場合もありますし、そもそもメインタグを設定していないサイトもあります。その場合は、任意の場所で設定してください。
今回は<main id=”Main”>というタグを使用します。
まず、<main id=”Main”>タグ部分をコピーしてメモ帳に貼り付けておきます。
続いてタグマネージャーの設定です。
・トリガーの設定
新規で「click_in_contents」という名前にしましょう。今回はaタグのリンクだけを取りたいので、「リンクのみ」にします。外部へのリンクがあるかもしれないので、念のため「タグの配信を待つ」にチェックをしておきます。
![](img/index/pic18.png)
今回は全てのページでイベントを取りたいので、次のように設定します。
これらすべての条件が true の場合にこのトリガーを有効化の設定を
「Page Path」 「正規表現に一致」 「.*」
ちなみに、「.*」は正規表現で「全て」のという意味です。
このトリガーの発生場所の項目でコンテンツ内のクリックのみに限定をする条件を設定します。
「Click Element」が「CSSセレクタに一致する」を選択し、条件に「main#Main a」と記載します。
「main#Main a」の部分は、<main id=”Main”>タグ配下のaタグという意味になります。サイトによって変化しますので各サイトに合った記述をしましょう。ここまで入力したら保存します。
![](img/index/pic19.png)
設定が完了したら、「トリガーの設定」が下記のようになっているかを確認しましょう。
![](img/index/pic20.png)
・タグ設定
新規で「click_in_contents」という名前にします。
![](img/index/pic21.png)
計測IDには先ほどと同じIDを入力します。
・イベント名
「click_in_contents」を入力します。
・イベントパラメータ
リンクテキストは、aタグで囲まれたタグの中に書かれている文字列のことです。
![](img/index/pic22.png)
この文字列を引き抜いてくるのがリンクテキストです。
リンクURL:クリックしたURL
リンククラス:クリックした要素のクラス
イベントパラメータにこれらのパラメータを追加することによって、条件下でどのリンクをクリックしたのかという情報が取れます。
これらのパラメータに使う変数はGTMに用意されていますので
変数 → 組み込み変数の設定をクリックして追加します。
![](img/index/pic23.png)
各パラメータの値には以下のように変数を設定しておきます。
![](img/index/pic24.png)
今回は何回クリックしてもイベントが取れるようにしておきたいので、「詳細設定」「タグ呼び出しオプション」では、「無制限」にしておきます。
・トリガー
「click_in_contents」に設定します。
すると、このようになりました。
![](img/index/pic25.png)
これで、同じようなクリックを何回しても無制限に取得ができます。
保存し、プレビュー画面で該当箇所のテキストをクリックしたところ、Link Click下にあるTags Fierdに表示されているのが分かります。
今回はリンクテキストをクリックしたため、Click下ではイベントが発生せず、Tags Firedには表示されません。また、<main id=”Main”>で範囲を指定したため、その他の範囲をクリックしてもイベントは発生しません。例えば、ヘッダーのメガメニューのリンクテキストをクリックしてもイベントは発生しないわけです。
このように、設定範囲をまたいでクリックしてみることで、イベントが発生してほしいエリアで発生しているかを確認することができます。ちなみに、うまくイベントが発生しないときはTags Firedに「None」(何もない)が表示されています。
![](img/index/pic26.png)
ここまで設定が完了したら、公開ボタンをクリックして公開します。
イベントレポートの作成
最後に、今回設定したイベントのレポートを出していきましょう。
今回は、「探索」メニューからレポートを抽出します。「自由形式」をクリックします。
![](img/index/pic27.png)
データ探索名を「読了イベント」など、識別しやすい名称に変更します。
![](img/index/pic28.png)
・ディメンション
ディメンションに含める条件を選択します。今回は「どのページで発生したか」という情報が欲しいので、「ページスクリーン」内の「ページタイトルとスクリーン名」「ページパスとスクリーンクラス」にチェックを入れます。
![](img/index/pic29.png)
この2つにチェックを入れることで、ページタイトルとページパス(https:以下から始まるURL)の情報が取得できるようになりました。
最後に右上の「インポート」をクリックして設定完了です。
・指標
同様に条件を選択します。今回は「イベント数」にします。
では、それぞれのレポートを確認していきましょう。
①読了イベント GA4「scroll」イベント
まずは①からです。
・設定
次のように条件を選択します。設定が完了すると、イベント数が表示されました。
![](img/index/pic30.png)
続いて、どのページでイベントが発生しているのかを確認しましょう。設定エリアの「行」の部分に、「ページタイトルとスクリーン名」「ページパスとスクリーンクラス」を入れます。この画面上では見づらいので、Excel等にデータをエクスポートして確認してください。
②表示イベント GTMで特定の要素を表示したことを取得
次のように条件を選択します。
![](img/index/pic31.png)
設定エリアの「行」の部分に、「ページタイトルとスクリーン名」「ページパスとスクリーンクラス」を入れ、「値」の部分に「イベント数」を入れます。
![](img/index/pic32.png)
データを取りたいページを限定したい場合は、「設定」下の「フィルタ」で絞りこむことが可能です。
![](img/index/pic33.png)
このように、必要に応じて設定を変えつつレポートを抽出してみてください。
③記事内リンククリック GTMで特定エリアのaタグクリックを取得
記事内リンククリックについても、同様に設定を進めます。
![](img/index/pic34.png)
読了よりもリンククリックをしてほしいページもあれば、読了してほしいページもあり、目的はさまざまです。目的に応じてコンテンツを評価するための設定は変わりますので、この点も意識してみてください。
今回は、1つのページビューにおけるコンテンツ評価の方法について紹介しました。BtoBにおいては、ユーザーがページを閉じた後や他のページに飛んだ後にコンバージョンすることもあります。次回以降は、その際の評価指標やイベントの取り方についても紹介していく予定です。
BtoB企業のデジタルコミュニケーションを総合的に支援しています
BtoB企業に特化したサービスを提供してきたイントリックスには多くの実績とノウハウがございます。現状のデジタル活用の課題に対し、俯瞰した視点でのご提案が可能ですので、ぜひお気軽にご相談ください。
お問い合わせ![](/seminar/img/common/banner_consultation.webp)
デジタル活用 無料オンライン相談会
BtoB企業のデジタル活用を支援してきた各分野の経験豊富なコンサルタントが、マクロな調査・戦略立案からミクロなデジタルマーケティング施策まで、デジタル活用の悩みにお応えします。
無料オンライン相談会概要・お申し込み
![](/btob-marketing-columns/img/common/banner_btob_download.webp)
NewsPicks掲載「BtoBをアプデする」
イントリックス代表 気賀 崇の公式note
noteでは、BtoBのデジタルコミュニケーションの面白さや意義、可能性などについて語っています