広告の指標を使用して Core Web Vitals のフィールド データを測定する

1. 始める前に

この Codelab では、事前構築済みの Google タグ マネージャー（GTM）タグ テンプレートを使用して Core Web Vitals を測定し、そのデータを Google アナリティクス 4（GA4）プロパティに送信する方法について説明します。また、事前構築済みの Looker Studio ダッシュボードで Core Web Vitals のフィールド データと広告のパフォーマンス指標を関連付けるために、Google アド マネージャーとGoogle AdSenseから GA4 にデータを取得する方法についても説明します。

演習内容

• タグを Google タグ マネージャーのコンテナにインポートして設定します。
• GA4 でウェブページの Core Web Vitals を測定します。
• Google タグ マネージャーで GA4 イベントタグを設定します。
• dataLayer と GA4 レポートでウェブに関する指標のデータを調べます。
• GA4 プロパティを Google アド マネージャーと Google AdSense にリンクします。
• Looker Studio ダッシュボードで Core Web Vitals と広告収入を関連付けます。

必要なもの

• Google アナリティクス アカウントと、編集者のアクセス権を持つ GA4 ウェブ プロパティ。
• Google タグ マネージャーのアカウントと、公開権限を持つウェブ コンテナ。
• 管理者権限を持つ Google アド マネージャー ネットワークまたは Google AdSense アカウント。
• Looker Studio アカウント。

2. GitHub から GTM にタグ テンプレートを追加する

GTM タグ テンプレートを使用した Core Web Vitals の測定は、web-vitals ライブラリに基づいています。まず、GTM タグ テンプレートをダウンロードします。

1. template.tpl ファイルを開きます
2. パソコンにファイルをダウンロードします

次に、Google タグ マネージャー アカウントに移動します。

1. ウェブ コンテナを開きます。
2. 新しいワークスペースを作成し、名前を入力します（例: 「Core Web Vitals の測定」）。
3. [テンプレート] に移動します。
4. [タグ テンプレート] セクションで [新規] ボタンをクリックします。

5. その他の操作メニューをクリックし、[インポート] を選択します。

6. パソコンから、先ほどダウンロードした TPL ファイルを選択します。
7. [保存] をクリックします。

タグ テンプレートが Google タグ マネージャーのコンテナに追加されました。

3. ウェブに関する指標のタグを設定する

1. Google タグ マネージャーのワークスペースで、[タグ] に移動します。
2. [新規]、[タグの設定] の順にクリックし、[カスタム] セクションから [ウェブに関する指標] タグを選択して、ウェブに関する指標のタグを追加します。
3. 次のステップでは、さまざまな設定を行います。すべての設定については、GitHub リポジトリで説明しています。この Codelab と最終的なダッシュボードを機能させるには、次の設定で十分です。

4. [ページビュー] トリガーのいずれか（[すべてのページ] トリガーなど）を適用します。
5. 必要に応じて、トリガーの除外も追加します。
6. タグに「Core Web Vitals - すべてのページ」という名前を付けて保存します。

4. dataLayer でウェブに関する指標のデータを調べる

タグの動作を確認するには、プレビュー モードに切り替えます（Google タグ マネージャー）。Tag Assistant が開き、設定のプレビューとデバッグを行うための URL が求められます。Google タグ マネージャーのコンテナが実装されているページの URL を入力し、[接続] をクリックします。指定した URL の別のタブが開きます。

1. スクロールしたり、要素や空白をクリックしたりして、ページを操作します。
2. 次に、Tag Assistant と Google タグ マネージャーのプレビュー モードのタブに戻ります。
3. 左側に、dataLayer にプッシュされたさまざまなイベントが表示されます。
4. まず、選択したページビュー トリガーでウェブに関する指標のタグが配信されたかどうかを確認します。

5. また、3 つの「web_vitals」イベントが表示されます。それぞれが、LCP、INP、CLS の 1 つのウェブに関する主な指標を表しています。

6. 最初のイベントをクリックし、右側の [API 呼び出し] タブを開きます。タグ テンプレートから dataLayer にプッシュされたデータが表示されます。

7. 「web_vitals」イベントの他のエントリも確認します。さまざまなデータタイプについては、web-vitals.js ドキュメントを参照してください。

5. ウェブに関する指標のデータを GA4 に送信する

dataLayer から Core Web Vitals のデータを取得して GA4 に送信するには、次の操作を行う必要があります。

• GA4 タグのトリガーを作成する
• dataLayer からデータをプルする変数を作成する
• GA4 イベントタグを作成する

トリガーを作成する

1. Google タグ マネージャーのワークスペースで、[トリガー] に移動します。
2. [新規]、[トリガーの設定] の順にクリックし、[その他] セクションから [カスタム イベント] を選択して、新しいトリガーを追加します。
3. [イベント名] フィールドに「web_vitals」と入力し、トリガーに名前を付けて保存します。

dataLayer 変数を作成する

1. Google タグ マネージャーのワークスペースで、[変数] に移動します。
2. 「データレイヤー変数」タイプから新しいユーザー定義変数を作成します。
3. [データレイヤー変数名] フィールドに「webVitalsData.name」と入力し、変数に名前を付けて（例: 「DLV - webVitalsData.name」）保存します。

4. 他の 4 つの必須データレイヤー変数についても、この手順を繰り返します。「webVitalsData.value」を作成します。

5. 名前フィールド「webVitalsData.id」を使用して、別の変数を作成します。

6. 「webVitalsData.rating」を作成します。

7. 「webVitalsData.delta」を作成します。

8. 最終的に、次のユーザー定義の dataLayer 変数が作成されます。

GA4 イベントタグを作成する

GA4 イベントタグを作成する前に、Google タグがすでに設定されていることを確認してください。

1. Google タグ マネージャーのワークスペースで、[タグ] に移動します。
2. [新規]、[タグの設定] の順にクリックし、[Google アナリティクス] セクションから [Google アナリティクス: GA4 イベント] タグを選択して、GA4 イベントタグを追加します。
3. 対応するフィールドに測定 ID を入力します。

4. [イベント名] 入力フィールドで、先ほど作成したステップの dataLayer 変数「DLV - webVitalsData.name」を選択します。

5. スクリーンショットに示すように、他の dataLayer 変数をイベント パラメータとして追加します。また、Core Web Vitals のイベントをグループ化するために、値が「ウェブに関する指標」などのパラメータ「event_category」を追加してください。

6. これらのイベント パラメータをカスタム ディメンションとして登録します（GA4 の管理画面）。
7. GA4 の設定要件に基づいて、追加の設定を適用します。
8. GA4 タグのトリガーとして「web_vitals」カスタム イベントを設定します。
9. 必要に応じて、トリガーの除外も追加します。

6. GA4 でデータを確認する

GA4 へのデータフローを検証するには、Google タグ マネージャーのプレビュー モードに切り替えます。Tag Assistant に URL を入力し、[接続] をクリックします。

1. スクロールしたり、要素や空白をクリックしたりして、ページを操作します。
2. 次に、Tag Assistant と Google タグ マネージャーのプレビュー モードのタブに戻ります。
3. 左側の「web_vitals」エントリをそれぞれクリックし、GA4 Core Web Vitals タグが配信されていることを確認します。

4. カードをクリックして GA4 タグを開き、dataLayer からデータが正しく取得されていることを確認します。変数が値として表示されるようにしてください。

5. 次に、GA4 プロパティに切り替えて、リアルタイム レポートを開きます。
6. [イベント名別のイベント数] カードで、Core Web Vitals のイベントが正常に収集されているかどうかを確認できます。

7. リアルタイム レポートで大量のデータが処理される場合、イベントを簡単に識別できないことがあります。その場合は、特定のデバイスのデータを表示できるデバッグビュー レポートを使用します。

7. 設定を公開する

設定のテストが完了したら、ワークスペースを公開します。

1. Google タグ マネージャーのワークスペースを開きます。
2. 管理画面の右上の [送信] をクリックします。
3. バージョン名とバージョンの説明を入力し、[公開] をクリックして設定を公開します。

8. GA4 を Google アド マネージャーまたは Google AdSense に接続する

GA4 で Core Web Vitals のデータを収集したら、ダッシュボードが機能するように、広告関連の指標も GA4 で使用できるようにする必要があります。Google アド マネージャーと Google AdSense のいずれか、または両方を GA4 に接続します。リンクするには、GA4 で編集者以上の権限、Google アド マネージャーと Google AdSense で管理者権限が必要です。

GA4 を Google アド マネージャーに接続する

1. Google アド マネージャー ネットワークに移動します。
2. [管理者] -> [全般設定] -> [掲載ネットワークの設定] をクリックします。
3. [レポート設定] セクションで、[アド マネージャーのレポートで Google アナリティクス 4 プロパティのレポートを作成する] を有効にします。

4. 利用規約を確認し、[確認] をクリックします。
5. 更新を保存します。
6. [管理者] -> [リンクされたアカウント] -> [Google アナリティクス 4] に移動します。
7. [新しい Google アナリティクス 4 プロパティのリンク] をクリックします。
8. リンクする GA4 プロパティを見つけて選択します。
9. [保存] をクリックして完了です。

GA4 を Google AdSense に接続する

1. Google AdSense アカウントに移動します。
2. [アカウント] -> [アクセスと認証] -> [Google アナリティクスとの統合] をクリックします。
3. [+ 新しいリンク] をクリックします。

4. リンクする GA4 プロパティを見つけて選択します。
5. [リンクを作成] をクリックします。

9. Looker Studio でデータを可視化する

Core Web Vitals のデータと広告指標を視覚的に表示するには、Looker Studio ダッシュボードを設定します。Core Web Vitals と広告収入を関連付ける手順は次のとおりです。

1. こちらの Looker Studio ダッシュボード テンプレートを開きます
2. ダッシュボードをコピーします。
3. プルダウン リストから GA4 プロパティを選択して、データソースを更新します。
4. 完了

ダッシュボードが機能してデータを正しく表示するには、この Codelab の構文と命名規則に準拠している必要があります。

ダッシュボードの 1 ページ目には、Core Web Vitals のパフォーマンスの履歴が表示されます。

2 ページ目では、Core Web Vitals と Google アド マネージャーまたは Google AdSense の広告収入を関連付けることができます。

3 ページ目では、ページパス レベルで Core Web Vitals のパフォーマンスを分析できます。広告関連の指標も表示されます。

10. まとめ

おめでとうございます。GA4 と、Google アド マネージャーと Google AdSense の広告のパフォーマンス指標を使用して、Core Web Vitals を測定してレポートする方法を学習しました。

詳細

• Google ツールを使用して Core Web Vitals と広告収益を関連付ける
• Page Speed に影響を与えずに広告を効果的に読み込む
• Largest Contentful Paint を最適化する
• Cumulative Layout Shift を最適化する
• Interaction to Next Paint を最適化する