ウェブサイトの HTTP ヘッダーまたは <META>
タグでコンテンツ セキュリティ ポリシー(CSP)を設定している場合、Google オプティマイズを使用するには、Google オプティマイズ ドメインと Google アナリティクス ドメインを指定する必要があります。
サーバーから配信されるすべてのコンテンツを無条件に信頼するのではなく、CSP に則したコンテンツ セキュリティ ポリシー HTTP ヘッダーを定義すると、信頼できるコンテンツ提供元のアクセス制御リストを作成して、ブラウザにこれらの提供元からのリソースのみを実行または表示するように指示できます。
コンテンツ セキュリティ ポリシー(CSP)に関するエラーのトラブルシューティング
以下の場合、オプティマイズを使用するように CSP を変更する必要があります。
a) ブラウザに以下のエラーが表示される
b) Google デベロッパー ツールに以下のエラーが表示される
c) 次のようなエラーが表示される
CSP の変更
コンテンツ セキュリティ ポリシー(CSP)を設定したオプティマイズ エクスペリエンス(テストやパーソナライズ)を実施またはプレビューするには、CSP に次のディレクティブを含める必要があります。
script-src https://www.googleanalytics.com https://www.google-analytics.com https://www.googleoptimize.com 'unsafe-inline';
style-src 'unsafe-inline';
img-src https://www.google-analytics.com https://www.googletagmanager.com
オプティマイズのビジュアル エディタを使用するには、CSP に次のディレクティブを含める必要があります。
script-src https://optimize.google.com 'unsafe-inline';
style-src https://optimize.google.com https://fonts.googleapis.com 'unsafe-inline';
img-src https://optimize.google.com;
font-src https://fonts.gstatic.com;
frame-src https://optimize.google.com
ウェブサイトですでに CSP を設定している場合は、既存のディレクティブに上記のディレクティブを追加してください。
オプティマイズとページフレーム処理の制限
次のようなエラー メッセージが表示される場合があります。
このとき、以下のような現象が発生している可能性があります。
オプティマイズ エディタのデスクトップ ビューには、フレームのセキュリティに関するディレクティブやページ技術に関連してフレーム処理(フレーム バスティング)を禁止する制限はありませんが、オプティマイズのビジュアル エディタで「モバイル」表示オプションを使用する場合は、自分のサイトでページがフレーム処理されることを許可する必要があります。
deny
の値を含む X-Frame-Options
レスポンス ヘッダーのディレクティブをサイトで使用している場合、モバイル編集機能は使用できません。
多くのウェブサイトで使用可能な回避策(ユーザーが作成したコンテンツを含まないサイトや、信頼できないページで共有されていないドメインなど)は、X-Frame-Options: sameorigin
への制約を緩和するためのものです。
X-Frame-Options: sameorigin
では、ページをご自身のウェブサイトでフレーム処理することはできますが、他のウェブサイトでフレーム処理することはできません。
詳しくは、MDW ウェブ ドキュメントで X-Frame-Options
に関する説明をご確認ください。
スタイル変更や CSS コードのダイアログでメディアクエリを使って、オプティマイズのビジュアル エディタ(デスクトップ上)でモバイル ユーザー向けに変更を加え、プレビュー モードでモバイル機能をプレビューすることもできます。
フレーム処理に関するエラーのトラブルシューティング
現在ウェブサイトで設定しているコンテンツ セキュリティ ポリシーを確認するには、Google デベロッパー ツールを使用します。コンソールで次のようなエラーが見つかった場合は、オプティマイズを使用するように CSP を変更する必要があります。