【LWR × GA4】公式推奨！Shadow DOMにも対応したGoogle Analytics 4 設定ガイド【基礎編】

この記事はバージョン Winter ’26 において執筆しています。
現在の動作と異なる場合がありますので、ご認識おきください。

「LWRサイトを作って公開したけれど、実際に何人の人が見てくれているんだろう？」「どのページが一番人気なのかな？」

Webサイトの運営において、アクセス解析は改善の第一歩です。その標準ツールといえば Google Analytics 4 (GA4) ですね。

Salesforce Experience Cloud (LWR) には、このGA4を導入するための機能が備わっています。しかし、LWRは「Shadow DOM」や「SPA（シングルページアプリケーション）」といった最新技術で動いているため、一般的なWebサイトと同じ方法でタグを貼っても、うまくクリック計測ができなかったり、動作が不安定になったりすることがあります。

今回は、Salesforce公式開発ガイドで推奨されている 「LWRサイトに最適化された実装方法」 を解説します。

なぜ「普通の設定」ではダメなのか？
Google Analytics で「測定ID」を取得する
【最重要】LWRにおける2つの実装ポイント
Salesforce Experience Cloud 設定手順
動作確認：リアルタイムレポート
まとめ
追記：応用編
参考URL

なぜ「普通の設定」ではダメなのか？

LWRサイトへの導入でつまずきやすいポイントは、Salesforceの強力なセキュリティ機能です。

外部スクリプトのブロック: デフォルトのセキュリティ設定では、Googleの解析コードであっても読み込みがブロックされます。
Shadow DOMの壁: LWRコンポーネントはカプセル化（Shadow DOM）されているため、通常のスクリプトではボタンクリックなどのイベントを正しく検知できない場合があります。

これを解決するために、Salesforce公式では <x-oasis-script> という専用のタグを使う方法を推奨しています。これを使うことで、LWRのセキュリティ要件を守りながら、GA4を正しく動作させることができます。

Google Analytics で「測定ID」を取得する

まずは、Google Analytics側で準備を行います（※Googleアカウントが必要です）。

Google Analyticsの管理画面で、新しい「プロパティ」を作成します。
「データストリーム」の設定で、プラットフォームとして [ウェブ] を選択します。
ウェブサイトのURLには、あなたのExperience CloudサイトのURL（https://....site.com）を入力します。
作成完了後に表示される 「G-」から始まる「測定ID」 をコピーします。
- ※ここでのポイント：表示されるタグ（コード）はコピーしなくてOKです。 LWR用のコードを後ほど独自に作成します。

プロパティ作成
ビジネスの説明
目標選択
プラットフォーム選択
ストリーム設定
作成完了

【最重要】LWRにおける2つの実装ポイント

Salesforceの公式ドキュメントでは、LWRサイトでGoogle Analyticsなどのサードパーティスクリプトを使用する場合、以下の2点を推奨しています。

CSP（コンテンツセキュリティポリシー）を「緩和」にする
- 外部のスクリプトを安全かつ確実に動作させるために必要です。
<script> ではなく <x-oasis-script> を使う
- これはSalesforce独自の特権スクリプトタグです。これを使うことで、LWC（Lightning Web Components）の内部（Shadow DOM）にあるボタンクリックやフォーム送信などのイベントを、Google Analyticsが正しく検知できるようになります。

Salesforce Experience Cloud 設定手順

手順1：CSP（セキュリティ）設定の緩和

エクスペリエンスビルダーで、サイトのセキュリティレベルを変更します。

エクスペリエンスビルダーを開き、左側の [設定] (歯車アイコン) をクリックします。
[セキュリティとプライバシー] タブを選択します。
[セキュリティレベル] の項目で、[緩和された CSP] を選択します。

DXforce Point

「厳格な CSP」のままだと、外部スクリプトの読み込みがブロックされ、GA4が正しく動作しない場合があります。

手順2：スクリプト用の信頼済みサイトの登録

次に、「このサイトはGoogleと通信しても良いですよ」という許可リストを作成します。

同じく [セキュリティとプライバシー] タブ内の [スクリプト用の信頼済みサイト] セクションで、以下のURLを追加してください。

1つ目：Google Analytics本体

URL: https://www.google-analytics.com
アクティブ: チェックを入れる

2つ目：Google Tag Manager

URL: https://www.googletagmanager.com
アクティブ: チェックを入れる

※「スクリプト」としての許可が必要なため、追加する際は必ず 「スクリプトを許可」 オプション（または関連するディレクティブ）が有効になっていることを確認してください。

手順3：信頼済み URL の設定

Salesforceの [設定] > [CSP 信頼済みサイト] を開き、以下の2つを追加してください。

Google Analytics

URL: https://www.google-analytics.com
CSP コンテキスト: エクスペリエンスビルダーサイト
許可するコンテキスト:
- connect-src (接続)
- img-src (画像)

Google Tag Manager

URL: https://www.googletagmanager.com
CSP コンテキスト: エクスペリエンスビルダーサイト
許可するコンテキスト:
- connect-src (接続)
- img-src (画像)

Google Analytics
Google Tag Manager

手順4：推奨タグ <x-oasis-script> の埋め込み

ここが最大のポイントです。通常の <script> タグではなく、LWR専用の特権タグ <x-oasis-script> を使用してコードを埋め込みます。

ビルダー設定の [詳細] タブを選択します。
[ヘッドマークアップを編集] ボタンをクリックします。
以下のコードをコピーし、G-XXXXXXXXXX の部分をご自身の「測定ID」に書き換えてから貼り付けます。※書き換えは2箇所あります

<script>
    (function() {
        // 履歴変更（ページ遷移）メソッドを保存
        var pushState = history.pushState;
        var replaceState = history.replaceState;

        // pushStateを上書きしてイベントを発火させる
        history.pushState = function() {
            var ret = pushState.apply(history, arguments);
            window.dispatchEvent(new Event('pushstate'));
            window.dispatchEvent(new Event('locationchange'));
            return ret;
        };

        // replaceStateを上書きしてイベントを発火させる
        history.replaceState = function() {
            var ret = replaceState.apply(history, arguments);
            window.dispatchEvent(new Event('replacestate'));
            window.dispatchEvent(new Event('locationchange'));
            return ret;
        };

        // ブラウザの「戻る・進む」操作も検知する
        window.addEventListener('popstate', function() {
            window.dispatchEvent(new Event('locationchange'));
        });
    })();
</script>

<x-oasis-script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></x-oasis-script>

<x-oasis-script>
    // dataLayerの準備
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    // ★重要：自動PV送信をOFFにする（SPAのため手動で送る）
    gtag('config', 'G-XXXXXXXXXX', {
        'send_page_view': false
    });

    // 1. 初回読み込み時のPV送信
    gtag('event', 'page_view', {
        'page_location': window.location.href,
        'page_title': document.title
    });

    // 2. 画面遷移イベント（上のscriptが出す合図）をキャッチしてPV送信
    window.addEventListener('locationchange', function() {
        // タイトルなどが書き換わるのを少し待ってから送信
        setTimeout(function(){
            gtag('event', 'page_view', {
                'page_location': window.location.href,
                'page_title': document.title
            });
        }, 100); // 0.1秒待機
    });
</x-oasis-script>

[保存] をクリックします。

DXforce Point

<x-oasis-script> とは？
Salesforceが提供する特殊なタグです。これを使うと、スクリプトが「Shadow DOM」の制限を越えて動作できるようになり、LWRサイト上でのトラッキング精度が向上します。

なぜこの書き方なのか？（解説）

<script> ブロックの役割
- GA4標準のタグには「ページ遷移を検知する機能」が含まれていません。
- LWRは特殊なページ移動をするため、最初のブロックで「ページ移動したら『locationchange』という合図を出してね」という命令をブラウザに埋め込んでいます。
<x-oasis-script> ブロックの役割
- ここでGA4本体（gtag.js）を読み込みます。
- ポイントは send_page_view: false です。これをしないと、勝手に（間違ったタイミングで）計測しようとして失敗したり、二重計測になったりします。
- その代わり、手動で gtag('event', 'page_view' ...) を実行することで、正しいURLとタイトルを確実にGoogleに送っています。