Zenn
📝

CAPIエラーが出ていたので順を追って確認してみた話

に公開
GTM
capi
tech

状況

サイトにアクセス→開発者ツールでconsoleタブで400BadRequestエラーを確認

NetWorkタブ→エラーのRequestHeadersをみてみる

なにこれ

GTMとあるからGTMタグに関連するエラーか？
でも、そもそもGTMタグとは？
そこも含めて確認してみることにした備忘録。

GTMタグとは

  1. Google Tag Manager（略してGTM）
    サイトに埋め込む「タグ」（計測用のコード）を、まとめて管理できる仕組み
    直接サイトのHTMLにコードを埋め込まなくても、GTMに設定するだけで各種サービス（Google Analytics, Facebook広告 など）にデータを送信できる
GTMでのタグ管理の具体例
  • 発火条件（トリガー）の管理→いつタグを発火させるかの条件をGTM上で設定
  • タグの内容（送信するデータ）の管理→発火時にどのデータを送るかを設定
タイミング（条件） タグ（送信するデータ） イメージ
ページ読み込み時 PageView（GA） 「ページを見たら計測する」スイッチON
購入完了画面到達時 Purchase（Facebook） 「購入したら計測する」スイッチON
ボタンクリック時 リード獲得イベント 「クリックしたら計測する」スイッチON
  1. GTM設置から計測完了までの流れ
  • GTMコンテナ作成
    GTM管理画面でコンテナを作る
    　※コンテナ＝「タグ・トリガー・変数」をまとめた箱のようなもの
    ↓
  • タグ・トリガー設定
    コンテナ内で、計測したいタグを追加
    発火条件（トリガー）もここで設定
    ↓
  • GTMスニペットをサイトに埋め込む
    <head> と <body> にGTMのJavaScriptを貼る
    例：<script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX">
    ↓
  • ブラウザがコンテナを読み込む
    ページ表示時にブラウザが gtm.js を読み込み
    コンテナ内のタグ設定・トリガー情報を取得
    ↓
  • タグ発火
    ユーザー行動がトリガー条件に合致したとき
    タグが実行され、計測先（Google Analytics・Facebookなど）にデータ送信
    ↓
  • 計測データ確認
    Google AnalyticsやFacebook広告などの計測先でデータを確認可能
    GTM自身はデータを保存しないが、プレビュー機能で「どのタグが発火したか」を確認できる

ブラウザ経由の計測と、CAPI経由の計測のちがい

データ計測方法は「ブラウザ経由」と「CAPI経由」があり、ここまでは「ブラウザ経由」の計測について説明している。
CAPI経由の計測方法詳細については下記リンクがわかりやすかったです。
https://www.ebis.ne.jp/column/facebook-capi/

https://anagrams.jp/blog/facebook-conversions-api/

ブラウザ経由とCAPI経由の違いまとめ
項目 ブラウザ経由 CAPI（サーバー経由）
誰が送る？ ユーザーのブラウザ サーバー側
どう送る？ ページ上のGTMタグ（JavaScript）が発火して送信 サーバーから直接計測サーバーに送信
メリット 実装が簡単、すぐ確認できる ブラウザの制約を受けにくく、より正確
デメリット 広告ブロックやCookie拒否で計測できない場合がある 実装がやや複雑、サーバー側で処理が必要

エラーの内容はブラウザ経由かCAPI経由か？

400BadRequestエラーの内容を分解してみる。

Request URL(※実際のURLではなくサンプルURLです)
https://YOUR_GTM_ENDPOINT.example.com/?v=1&t=pp_capi&dl=https%3A%2F%2Fsamplesaite.com%2F&en=PageView&eid=MASKED_EVENT_ID&fbp=MASKED_FBP&pid=MASKED_PIXEL_ID

  • https://YOUR_GTM_ENDPOINT.example.com/
    ホスト部分、CAPIイベントを送信する先のサードパーティのサーバー（受け口）

  • v=1
    APIバージョン。固定

  • t=pp_capi
    CAPI経由でのイベント送信

  • dl=https%3A%2F%2Fsamplesaite.com%2F
    「document location」ページURL

  • en=PageView
    ページ閲覧イベント送信

  • eid=MASKED_EVENT_ID
    同一イベントの二重計測を防ぐために付与するユニークID

  • fbp=MASKED_FBP
    FacebookブラウザID（ユーザー識別に用いるCookie）

  • pid=MASKED_PIXEL_ID
    Facebook広告ピクセルID（「このイベントをどの広告アカウントに送るか」を示すタグの識別子)

    分解したURLのうち、ここ[t=pp_capi]の部分で、今回のエラーはCAPI経由のイベント送信だとわかる

CAPIリクスト発生元はどこ？

  • リクエストヘッダーの Referer を確認
    →閲覧しているページのURL　＝　ブラウザからのリクスト
  • 該当ページのHTML
    →CAPI送信コードの記載があるか？　→GTMタグしかない＆GTMタグ自体は発火している


    この状況で考えられるのは
    GTM経由でCAPI送信をしており、CAPIに関する設定にミスがある





以上、エラー原因特定までのまとめでした
GTMの設定について確認ができて、ミス解消までの手法が判明したらまた続きを書く予定

Discussion