StudioとGTM連携！ページ閲覧をトリガーにタグを配信する方法

皆さん、こんにちは！STUDIOのSaikaです。

今回の記事では、STUDIOとGoogleタグマネージャーをApps連携させ、ページ閲覧をトリガーとしたタグ配信の設定方法と設定時に注意したい点をご紹介します。

STUDIOで制作したサイトは、ページ遷移時にリロードが発生しない仕組みとなっているため「ページ閲覧」をトリガーに設定する際には注意が必要です。

具体的には、例えば予約フォームページのような特定ページにアクセスした際に、特定タグを配信するための設定となります。

これからGoogleタグマネージャーを使って、ページ閲覧時にタグの配信を考えている方はぜひ、最後までご覧ください！なお、クリックイベントのトラッキングについては、以下のヘルプ記事にて解説しています。
Google タグマネージャーと Googleアナリティクスを活用しクリックイベントを計測する：STUDIO U

💡 この記事で取り上げる内容は、STUDIO以外のサービスを用いた応用的な設定になります。提供する情報に関してSTUDIOのチャットサポートでは対応しかねますので、ご理解ください。STUDIO Community Japan での質問投稿などをご検討ください。

STUDIOとGTMの活用

有料プラン契約中のSTUDIOサイトには、Googleタグマネージャーが連携できます。これにより、WebサイトへのJavaScriptの追加や更新ができ、サイト閲覧者のアクショントラッキングなどが可能となります。

連携方法は以下のヘルプ記事でご確認いただけます。
Googleタグマネージャーの連携方法：STUDIO U

設定の概要とその理由

STUDIOで制作したサイトは、ページ遷移時にリロードが発生しない仕組みとなっており、これはSTUDIOサイトが「SPA（シングルページアプリケーション）」で構築されているからです。

SPAについて詳しくは以下をご覧ください。
SPA (単一ページアプリケーション) - MDN Web Docs 用語集: ウェブ関連用語の定義：MDN

このため、STUDIOサイト（SPA）に合わせた設定を行う必要があります。

詳しい設定方法は次のセクションでご紹介しますが、その前にこのセクションでは設定の概要とこれら設定が必要な理由を解説します。

STUDIOサイトでは「ページの閲覧」トリガーだけでは、ページ間の遷移時にタグが適切に配信されません。これを解決するためには、ページへの初回アクセスと内部ページ遷移、それぞれに適したトリガーを設定する必要があります。

具体的には以下のような設定を行います。

• ページ遷移時のタグ配信： ユーザーが新しいページに遷移した際にタグを発火させるために、「履歴の変更」トリガーを使用します。

• 初回アクセス時のタグ配信：サイトへの直接アクセス時には「ページの閲覧」トリガーを用います。

しかし、これらを設定すると、履歴の変更があった際にタグが2回配信される問題が発生します。この重複を避けるために、Googleアナリティクスで「ブラウザの履歴イベントに基づくページの変更」機能をオフにします。

Googleアナリティクスでの設定変更で重複問題は解決しますが、これにより新たに別の問題が発生します。アンカーリンクを含んだURLの遷移で、#以下が取得できなくなります。これに対処するため、Googleタグマネージャー側「page_view」イベントを送信するタグの設定を行います。

これら本記事でご紹介する設定項目をまとめると、

• 特定ページへの初回アクセスとページ間遷移の両方で正しくタグが配信されるように、２種類のタグを設定する。

• タグの重複配信を防ぐために、Googleアナリティクスの設定を調整する。

• サイト全体での page_view を正しく計測するため、２種類のタグを設定する。

となります。詳細な設定方法は、次のセクションで解説します。

設定方法

STUDIOサイトと Googleタグマネージャーの連携方法については記事内では触れないため、あらかじめ以下のヘルプ記事を参考に連携しておきましょう。

なお、Apps連携は有料プランをご契約のプロジェクトでのみ設定可能です。必要に応じてプランアップグレードをご検討ください。

• 料金プラン：STUDIO

• Googleタグマネージャーの連携方法：STUDIO U

1. GoogleタグマネージャーでGoogleアナリティクス4を設定する

Googleアナリティクス4は、STUDIO Apps連携機能を使って連携することも可能ですが、今回の設定ではGoogleタグマネージャー経由でGoogleアナリティクス4を設定します。

1. Googleタグマネージャーにて、タグを新規作成します。

2. タグの設定では、Googleアナリティクス内の「Googleタグ」を選択します。

3. Googleアナリティクスへアクセスし、管理画面の「データストリーム」から測定IDをコピーします。

4. Googleタグマネージャーへ戻り、コピーした測定IDを「タグID」欄に入力します。

5. トリガーでは、「All Pages」を選択します。設定が整ったら、タグを保存します。

2. 特定ページの初回アクセス時にタグを配信：「ページの閲覧」トリガーを設定

1. タグを新規作成します。タグの設定では、Googleアナリティクス内「Googleアナリティクス：GA4イベント」を選択します。

2. Google アナリティクスのデータストリームから測定IDをコピーし、「測定ID」欄ににペーストします。任意のイベント名を入力します。

3. トリガーは新規作成します。トリガータイプは「ページビュー」。トリガーの発生場所を設定します。

4. タグを保存し、Googleタグマネージャーのプレビューで配信できているかチェックします。

3. 特定ページへのページ遷移時にタグを配信：「履歴の変更」トリガーを設定

2のステップと設定はほとんど同じです。トリガーのみが異なります。

1. タグを新規作成します。タグの設定は、Google アナリティクス内「Google アナリティクス：GA4イベント」を選択します。

2. Google アナリティクスのデータストリームから測定IDをコピーし、測定IDにペーストします。任意のイベント名を入力します。

3. トリガーは新規作成します。トリガータイプは「履歴の変更」。トリガーの発生場所を設定します。

4. タグを保存します。

4. 「ブラウザの履歴イベントに基づくページの変更」をオフ

Googleアナリティクスはデフォルトで「ブラウザの履歴イベントに基づくページの変更」を追跡する設定になっています。これを無効にすることで、３の手順で設定したタグが重複して発火するのを防ぎます。

1. Googleアナリティクスへアクセスし、管理画面を開きます。データストリームから該当のストリームを開きます。

1. 拡張計測機能の歯車マークをクリックし、設定画面を開きます。「ページビュー数」の詳細設定を表示をクリックし、「ブラウザの履歴イベントに基づくページの変更」からチェックを外し保存します。

5. 変数の設定変更と新規作成

ここではカスタム変数をイベントパラメータに設定するため、変数の設定変更とカスタム変数を作成します。

変数の設定変更

変数タブから組み込み変数の設定を開きます。「履歴」に該当するチェックボックスに全てチェックを入れます。

カスタム変数の作成

1. 変数タブでユーザー定義変数を新規作成します。

2. 変数のタイプでページ変数の「JavaScript 変数」を選択します。

3. グローバル変数名に window.location.href を入力します。

4. 変数に任意の名称をつけて保存します。

6. サイト全体の page_view 送信設定：初回アクセス時

ページへ初回アクセスした際やロード時に page_view を送信するタグを設定します。

1. タグを新規作成します。タグの設定は、Google アナリティクス内「Google アナリティクス：GA4イベント」を選択します。

2. Google アナリティクスのデータストリームから測定IDをコピーし、測定IDにペーストします。イベント名は page_view とします。

2. イベントパラメータを設定します。パラメータ名に page_location を入力し、値の「+」ボタンをクリックして先ほど作成した変数を選択します。

3. トリガーは「All Pages」を設定し、保存します。

7. サイト全体の page_view 送信設定：ページ遷移時

別ページからのページ遷移時に page_view を送信するタグを設定します。

タグの作成

1. タグを新規作成します。タグの設定は、Google アナリティクス内「Google アナリティクス：GA4イベント」を選択します。

2. Google アナリティクスのデータストリームから測定IDをコピーし、測定IDにペーストします。イベント名はpage_viewとします。

3. イベントパラメータを設定します。パラメータ名に page_location を入力し、値の「+」ボタンをクリックして先ほど作成した変数を選択します。

4. トリガーは新規作成します。トリガータイプは「履歴の変更」。トリガーの発生場所を「一部の履歴変更」とし、「History Source」 「含む」「pushState」を設定します。設定できればタグを保存します。

8. タグの公開

全ての設定完了後、GoogleタグマネージャーのプレビューとGoogleアナリティクスのリアルタイムレポートでイベントをご確認ください。問題がなければ Googleタグマネージャーで公開します。

最後に

今回は、コンバージョン計測などで設定されることがあるページ閲覧時のタグ配信についてご紹介しました。STUDIOのページ遷移時の仕組みを理解した上でタグの設定をすれば、配信も問題なく行えます。

本記事でご紹介した他にも、あなたがこれまでにSTUDIOを活用する中で得たナレッジがあれば STUDIO Community Japanで投稿して共有してみませんか？STUDIOメンバーもあなたの投稿を楽しみにしています！