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

1. 始める前に

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

演習内容

• 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. Web Vitals タグを設定する

1. Google タグ マネージャーのワークスペースで、[タグ] に移動します。
2. [新規]、[タグの設定] の順にクリックして、Web Vitals タグを追加します[ウェブに関する主な指標]を「新規顧客の獲得」目標の。
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 に push されていることがわかります。
4. まず、選択したページビュー トリガーで Web Vitals タグが配信されたかどうかを確認する必要があります。

5. 「web_vitals」が 3 つ表示されます。それぞれが 1 つの Core Web Vitals（LCP、INP、CLS）を表します。

6. 最初のボタンをクリックし、右側にある [API Call] を開くタブ内に、タグ テンプレートから dataLayer にプッシュされたデータが表示されます。

7. "web_vitals" のその他のエントリもできます。さまざまなデータ型のリファレンスとして、web-vitals.js のドキュメントをご覧ください。

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

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

• GA4 タグのトリガーを作成する
• dataLayer からデータを pull するための変数を作成する
• 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. [新規]、[タグの設定] の順にクリックして、GA4 イベントタグを追加します。[Google アナリティクス: GA4 イベント]を「Google アナリティクス」タグから。
3. 対応する欄に測定 ID を入力します。

4. [イベント名] は、入力フィールドで、dataLayer 変数「DLV - webVitalsData.name」を選択します取得されます。

5. スクリーンショットに示すように、他の dataLayer 変数をイベント パラメータとして追加します。また、パラメータ「event_category」も追加します。値（たとえば「Web Vitals」）をCore Web Vitals イベントをグループ化できます

6. GA4 の管理画面で、これらのイベント パラメータをカスタム ディメンションとして登録します。
7. GA4 の設定要件に基づいて、追加の設定を適用します。
8. "web_vitals" を設定するGA4 タグのトリガーとして カスタムイベントを定義します
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. リアルタイム レポートで大量のデータが処理されている場合、イベントが簡単に識別されないことがあります。その場合は、debugview レポートを使用すると、特定のデバイスのデータを確認できます。

7. 設定を公開する

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

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

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

Core Web Vitals のデータを GA4 で収集した後、ダッシュボードが機能するためには、広告関連の指標も GA4 で利用できる必要があります。Google アド マネージャーと Google AdSense のいずれかを GA4 に接続するか、これらの広告ソリューションのいずれか 1 つを接続します。リンクするには、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 で Core Web Vitals を測定してレポートする方法と、Google アド マネージャーと Google AdSense の広告パフォーマンス指標について学習しました。

その他の情報

• ページの読み込み速度に影響を及ぼすことなく広告を効果的に読み込む
• Largest Contentful Paint を最適化する
• Cumulative Layout Shift を最適化する
• Next Paint のインタラクションを最適化する