Googleタグマネージャー（以降：GTM）を使って、コンバージョン計測をしたいと思った時、単純な「ページ到達」や「ボタンクリック」だけでは、本当に興味を持ってくれたユーザーを正確に測れないと感じた事はないでしょうか？
例えば、ページを開いてすぐ離脱したユーザーも、じっくり読んでくれたユーザーも、同じ「ページビュー」としてカウントされてしまうと、広告の成果を正しく判断するのは難しくなります！
そこで今回は、サイトで「○○秒滞在し＋○○％以上スクロール」という条件を全てクリアして初めて発火するGTM設定方法をご紹介します！因みに今回は例として「120秒以上サイトに滞在し、かつ70%以上スクロールしたユーザー」だけをコンバージョンとして計測するという形で解説していこうと思います！
今回の設定は、Javascriptの基礎的な知識が必要な少し複雑な構造になっていますので、画面のスクリーンショット画像も含めて詳しく解説していきます！
設定内容の確認
まず今回の発火条件をおさらいしておきましょう！ご紹介する設定は、下記2つの条件を両方満たしたユーザーだけをCVとしてカウントします！
・120秒以上ページに滞在している
・ページの70%以上までスクロールしている
片方だけでは発火せず、両方揃った時に初めてコンバージョンタグが発火するので、「熟読ユーザー」だけを抽出できる可能性が高くなります！
データレイヤーの変数を2つ作成する
まずは、2つの条件を満たしたかどうかを記録しておくための「変数」を2つ作成していきます！
GTM管理画面の左メニューから「変数」→「ユーザー定義変数」→「新規」をクリックし、下記の内容で作成します。
◎変数1「dlv – time_fired」※各々分かりやすい任意の名前を付けてください。
・変数のタイプ：データレイヤーの変数
・データレイヤーの変数名：time_fired ※各々分かりやすい任意の名前を付けてください。
・デフォルト値：false
◎変数2「dlv – scroll_fired」※各々分かりやすい任意の名前を付けてください。
・変数のタイプ：データレイヤーの変数
・データレイヤーの変数名：scroll_fired ※各々分かりやすい任意の名前を付けてください。
・デフォルト値：false
設定画面はこんな感じになります！（time_firedの例）
この2つの変数が、後ほど「120秒経過したよ！」「70%スクロールしたよ！」というフラグを出すイメージです！
トリガーを3つ作成する
次に、発火条件となるトリガーを3つ作成していきましょう！
①トリガー1「120秒閲覧発火」※各々分かりやすい任意の名前を付けてください。
「トリガー」→「新規」→トリガーのタイプで「タイマー」を選択します。
・イベント名：gtm.timer ※各々分かりやすい任意の名前を付けてください。
・間隔：120000（ミリ秒で設定）※ミリ秒：1秒の1000分の1（0.001秒）を表す短い時間の単位。
・制限：1
・このトリガーの発生場所：すべてのタイマー
・条件：Page URL 含む 対象LPのURL
設定画面はこんな感じになります！
②トリガー2「70％スクロール発火」
続いて「トリガー」→「新規」→トリガーのタイプで「スクロール距離」を選択します。
・縦方向スクロール距離：割合 70
・このトリガーの発生場所：ウィンドウの読み込み後
・条件：Page URL 含む 対象LPのURL
設定画面はこちらです。
③トリガー3「CV発火条件クリア」
最後に、先ほど作った①と②、2つの条件が揃った瞬間を検知するトリガーを作ります。
これが今回の設定で一番難しい項目です！
「トリガー」→「新規」→トリガーのタイプで「カスタムイベント」を選択します。
・イベント名：cv_ready ※各々分かりやすい任意の名前を付けてください。
・このトリガーの発生場所：一部のカスタムイベント
・条件（3つ全て設定）：
– Page URL 含む 対象LPのURL
– dlv – time_fired 等しい true
– dlv – scroll_fired 等しい true
設定画面はこんな感じになります！
このトリガーが、「120秒経過」と「70%スクロール」の両方が揃った瞬間だけ発火するトリガーになっています！
フラグを立てるHTMLタグを2つ作成する
次に、「120秒経過したよ！」「70%スクロールしたよ！」というフラグを立てるためのカスタムHTMLタグを2つ作成します。※構造が複雑なので間違え防止で、タグ名は敢えて長めに設定しています！
◎タグ1「HTML – time_fired を true にする」※間違えない分かりやすい任意の名前を付けてください。
「タグ」→「新規」→タグのタイプで「カスタムHTML」を選択し、下記のJavascriptを入力します！
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'cv_ready',
'time_fired': true
});
</script>※トリガーには、先ほど作成した「120秒タイマー」を指定してください！
◎タグ2「HTML – scroll_fired を true にする」※間違えない分かりやすい任意の名前を付けてください。
同じ要領でもう1つ作成し、下記のJavascriptを入力します！
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'cv_ready',
'scroll_fired': true
});
</script>※こちらのトリガーには「70％スクロール発火」を指定してください！
設定画面はこちらです！（time_firedの例）
このタグが発火すると、対応するフラグが「false」から「true」に切り替わり、同時に「cv_ready」イベントが発動する仕組みです！
cv_readyイベントが発動されるたびに、「CV発火条件クリア」トリガーが、設定した条件をチェックしにいくという流れです！
Google広告のコンバージョンタグを設定する
最後に、実際にコンバージョンを計測するタグを作成します！
「タグ」→「新規」→タグのタイプで「Google広告のコンバージョントラッキング」を選択します。
・コンバージョンID：Google広告管理画面から取得した値
・コンバージョンラベル：Google広告管理画面から取得した値
・トリガー：CV発火条件クリア
・詳細設定 → タグの配信オプション：1ページにつき1度
設定画面はこちらです。
※注「1ページにつき1度」の設定を忘れると、条件が揃った後に何度も発火してしまう可能性があるので、必ずチェックしましょう！
プレビューモードで動作確認する
本番公開の前に、必ずプレビューモードで動作確認をしましょう！
チェックのポイントは下記の3つです！
・120秒経過だけではCVタグが発火しないこと
・70%スクロールだけではCVタグが発火しないこと
・両方の条件が揃った瞬間にCVタグが1回だけ発火すること
問題なく発火が確認できたら、本番公開すれば設定完了です！
まとめ
いかがでしたか？
今回は「120秒滞在＋70%スクロール」という2つの条件を組み合わせた、精度の高いコンバージョン計測の設定方法をご紹介しました。
このような設定を取り入れる事で、「本当に興味を持ってくれた熟読ユーザー」だけを抽出でき、広告運用の判断精度がぐっと上がります！
弊社BOPコミュニケーションズでは、Web広告の配信・運用を承っております。
・売上を伸ばすためにWeb広告を活用してみたい。
・自社で広告配信をしているが、手探り状態なので効率を上げたい。
・広告の運用をプロに任せて、よりビジネスを大きくしていきたい。
そんな場合は、お気軽にご相談ください！
★フォームからすぐにお問い合わせしたい場合はこちら↓
