Mautic Advent Calendar 19日目にも再登場しました。コンクリートファイブジャパン と Mautic Meetup Nagoya の Katz です。
昨日のブログ記事、大阪の井坂さんによる「Mautic Meetup Osaka開催について」に引き続き書いてみます。
Mautic で Javascript のトラッキングを使用する際、ブラウザの CORS (Cross-Origin Resource Sharing) 対策をしてみましょう。
CORS (Cross-Origin Resource Sharing) とは、別ドメインで Javascript ファイルを実行する際に、実行が許可されているか否かを共有するものです。
Mautic では設定画面から CORS 対策の有効化・無効化と許可するドメインの設定が可能です。
Version 2.3 時点での情報です。
Mautic に管理者権限でログイン。
一番右上の歯車ボタンを押して右側のシステムメニューが出てきます。
システムメニューから「設定」を選択。
システム設定を下にスクロールすると下記のような「CORS Setting」画面が現れます。
Restrict Domains を「はい」に
そして右側に、1行ずつ許可するドメインを入れていきます。
http と https ドメイン両方を運用している場合は、下記のように http と https 両方を入力します。
最近、ブラウザ側で、ハッカーのなりすまし攻撃対策として、同じドメイン以外からのリクエストは受け付けないようにする防御策がされています。
また、Mautic の JS コードはどこでも埋め込むことが可能です。
自分の意図されていないドメインで設置されていると、変なカウントがされたりします。
そういう時に CORS 対策は有効です。
うっかりミスを気をつけよう
CORS の設定がうまく言っていないと、 Google Chrome の開発ツールで下記のようなエラーがでます。
CORS の設定を間違えると、Mautic のトラッキングコードが働かなくなります。（画像はドメインがわからないように加工）
XMLHttpRequest cannot load [HTMLファイル:1 【Mautic】/mtc. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '【WebサイトURL】' is therefore not allowed.
こういうエラーが出ていたら、 Mautic の CORS 設定を見直しましょう。 CORS 設定をしたら、かならず Chrome の Developer Tools などで見直してくださいね。
さて Mautic Advent Calendar 2016 、明日は mihara さんの予定です。
以上
PR: Mautic 導入支援もコンクリートファイブジャパン株式会社におまかせください！
