Claude Codeでブラウザを操作し、GTMの設定変更から公開まで自動化した話

2026年4月14日

AIにブラウザを渡したら、GTMの設定ミスを2つ直してくれた

GTMの管理画面を開いて、タグを確認して、変数を作って、保存して、バージョン公開。この一連の操作を、AIが全部やった。

Claude Codeの chrome-devtools MCPを使うと、開いているChromeブラウザをAIが直接操作できる。ボタンのクリック、テキストの入力、ページ遷移、スクリーンショットの取得。人間がマウスとキーボードでやることを、そのままAIが代行する。

今回これを使って、GTMの計測トラブル2件を修正し、4つのバージョン（v110〜v113）を公開した。手動なら管理画面を行き来しながら30分はかかる作業が、AIとの対話だけで完了した。

どんな問題があって、AIがどう操作して、どこでつまずいたか。全記録を共有する。

直した問題は2つ

URLパラメータがGA4に記録されない

あるサイトでは、LINE経由の流入を追跡するために、URLの末尾に ?friend_id=xxx というパラメータを付けている。これをGA4に記録して「LINEから来たユーザー」を判別していたが、URL仕様の変更以降、値が空のまま送信されるようになっていた。

原因はデータの準備が間に合っていないこと。

GTMでは、ページ読み込み時に処理が決まった順番で実行される。この順番を管理するのがdataLayer（GTMとサイトの間でデータを受け渡す仕組み）だ。

Index 0 GTMコンテナ読み込み → GA4のpage_viewがここで発火
Index 1 DOM構築完了
Index 2 ページ読み込み完了
Index 3以降 サイト独自のスクリプト → friend_idがここで初めてセットされる

GA4がデータを送る時点では、friend_idはまだdataLayerに書き込まれていない。GA4は空の値を読み取って送信してしまう。

dataLayerから値を読む変数（DataLayer Variable）は、書き込み前なら空を返す。これが原因だった。

dataLayerを経由せず、URLから直接読む変数を作って解決した。

function() {
  var params = new URLSearchParams(window.location.search);
  return params.get('friend_id') || localStorage.getItem('lt_friend_id') || '';
}

GA4が最初に実行される時点で、すでにURLから値を取得できる。dataLayerへの書き込みを待つ必要がない。

ドメインをまたぐとユーザーが別人になる

GTMの「コンテナの診断」機能で緊急アラートが出ていた。

このサイトでは5つのドメインを1つのGTMで管理している。メインサイト、拠点別サイト、広告用LPなど。問題は、ドメイン間の移動でユーザーのClient IDが引き継がれない設定になっていたこと。

原因は「コンバージョンリンカー」の設定漏れ。コンバージョンリンカーは、ユーザーが別ドメインに移動するとき、URLに _gl=xxx というパラメータを自動付与して同一ユーザーとして引き継ぐタグだ。5つのドメインのうち2つしか登録されていなかった。

影響は大きい。広告をクリックしてLPに来た人がメインサイトで問い合わせをしても、GA4では「直接アクセス」として記録される。広告のROASが実態より低く計算されてしまう。

Claude Codeがブラウザ上でやったこと

ここからが本題。この2つの問題を、Claude CodeがGTMの管理画面を直接操作して修正した。

chrome-devtools MCPでできること

chrome-devtools MCPは、Chromeブラウザのページに対してAIが操作を行える仕組みだ。

ツール	動作
`take_snapshot`	ページ構造を読み取る
`click`	要素をクリック
`fill`	テキスト入力
`evaluate_script`	JavaScript実行
`navigate_page`	URL遷移
`take_screenshot`	スクリーンショット取得

実際のプロンプト例

AIへの指示はこんな感じだ。

「GTMの変数一覧ページを開いて、新しいカスタムJavaScript変数を作成して。変数名は "URL - friend_id" で、コードは（上記の関数）を入れて。」

「コンバージョンリンカーのタグを開いて、ドメイン設定に以下の5ドメインを全部追加して。」

AIはこの指示を受けて、take_snapshotで画面構造を把握し、clickやfillで操作を進め、take_screenshotで途中経過を見せてくれる。

friend_id変数の作成からGA4タグの切り替えまで

list_pagesで開いているタブを確認
navigate_pageでGTM変数作成ページに移動
take_snapshotでページ構造を把握
変数タイプ「カスタムJavaScript」を選択
コードエディタにJavaScriptを入力
変数を保存
3つのGA4タグの参照先を新しい変数に切り替え
バージョン公開

ステップ5でつまずいた。GTMのコードエディタはCodeMirrorというリッチエディタを使っていて、通常の fill コマンドが効かない。

突破方法は evaluate_script でCodeMirrorのAPIを直接呼び出すこと。

document.querySelector('.CodeMirror').CodeMirror.setValue(
  "function() {\n  var params = new URLSearchParams(window.location.search);\n  return params.get('friend_id') || localStorage.getItem('lt_friend_id') || '';\n}"
)

コンバージョンリンカーの修正

GTMの診断パネルを開く
「ドメインを構成」→「ワークスペースに追加」で自動修正を適用
自動修正が追加したドメインを確認 → 5つのうち2つが漏れていた
2つのリンカータグを開き、全5ドメインを手動で追加
バージョン公開

自動修正の落とし穴がある。GTMの自動修正は過去にアクセスがあったドメインしか追加しない。アクセスが少ないサブドメインや新規ドメインは検知されない。自動修正後も、管理ドメインの一覧と突合する必要がある。

つまずいたポイント

何が起きたか	なぜ	どう突破したか
コードエディタに入力できない	CodeMirrorは通常のinput要素ではない	`evaluate_script`でAPIを直接呼び出し
変数名の欄に入力できない	contenteditable要素だった	要素を正確に特定してテキスト入力
公開ボタンが反応しない	確認ダイアログの表示待ち	`take_snapshot`で再取得してからクリック
自動修正がドメインを漏らす	アクセス履歴ベースの推奨	手動で全ドメインを確認・補完

APIとの使い分け

GTMにはTag Manager APIがある。今回ブラウザ操作を選んだ理由は3つ。

準備がほぼ不要。 APIは認証設定やスクリプト作成が必要。chrome-devtools MCPならGTMを開いたブラウザがあればすぐ始められる。

目で確認しながら進められる。 操作の途中でスクリーンショットが撮れる。何が起きているか視覚的にわかる。

対話しながら試行錯誤できる。 「このタグを開いて」「この値を変えて」と話しかけるように指示できる。APIだとデータ構造を正確に把握しないと操作できない。

一方、数十〜数百のタグを一括変更するならAPIの方が圧倒的に速い。今回のような数件の修正＋確認作業はブラウザ操作、大量の定型処理はAPI。規模で使い分けるのが現実的だ。

やってみるには

必要なもの:

Claude Code（Anthropicのターミナル型AIツール。Max/Proプランで利用可能）
chrome-devtools MCPの設定（Claude Codeの .mcp.json に追加）
Chromeブラウザ（リモートデバッグモードで起動）
GTMアカウントへのアクセス権

最小手順:

Chromeをリモートデバッグモードで起動（--remote-debugging-port=9222）
Claude Codeのプロジェクトに chrome-devtools MCPを設定
ブラウザでGTM管理画面にログイン
Claude Codeに「GTMの管理画面が開いてるので、変数の一覧を見せて」と指示

ここから先は対話で進められる。「このタグの設定を見せて」「この値を変えて」と指示すれば、AIが画面を読み取って操作してくれる。

まとめ

chrome-devtools MCPを使えば、GTMのようなWeb管理画面でも、AIにブラウザ操作を任せて設定変更から公開まで完了できる。

今回わかったこと:

dataLayerの実行順序は落とし穴になる。 GA4のpage_viewはIndex 0で発火するため、後からpushされるデータは取りこぼす。URLから直接読む変数で回避できる
GTMの自動診断は万能ではない。 自動修正を適用した後も、管理ドメインのリストと突合する手間を省かない
Web管理画面の自動化は実用段階にある。 CodeMirrorのような特殊UIも、JavaScriptを実行する機能で突破できる

この手法はGTMに限らない。Google Ads、Meta広告マネージャ、Search Consoleなど、APIでの操作が限定的なWeb管理画面全般に応用できる。APIが用意されていないツールほど、ブラウザ操作AIの価値が高い。