コフス技術ブログ

ホームに戻る
Powered by
ホーム
備忘録

Chrome拡張機能でGA連携する時にCSPで怒られたらanalytics.js読み込み先をsslタイプにしてみると良い

この記事はにメンテナンスが行われています。

Chrome拡張機能にて、例えばpopup.htmlを開いたタイミングを確認したい（要するに利用をトラッキングしたい）時ははGA連携をしてしまえば簡単に実現できます。

Webサイトだけと思いきや実はChrome拡張機能のようなアプリでも可能なんですね。公式のリファレンスは以下から確認する事が出来ます。

基本的には上の公式ページの内容を順番通りにしていくだけですが、一部情報が古いためそのまま進めると**Content Security Policy（CSP）**で怒られます。

2019年記事公開時現在の最新のやり方は以下の通りです。

  1. まずは連携するGAを公式記事通りに作ってしまいます。この時WebサイトのURLはChrome拡張機能には存在しないので、任意のURLを入れておくとOKです。
  2. manifest.jsonにCSPを追加します。"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'"
  3. 後ほど記述するスクリプトをanalytics.jsとして新たにファイルを用意します。
  4. popup.htmlでanalytics.jsを読み込みます。

analytics.jsの中身は以下です。途中にご自身のGAIDを入力する箇所があります。忘れずに設定しておきましょう。

  (function(i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r;
    (i[r] =
      i[r] ||
      function() {
        (i[r].q = i[r].q || []).push(arguments);
      }),
    (i[r].l = 1 * new Date());
    (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
    a.async = 1;
    a.src = g;
    m.parentNode.insertBefore(a, m);
  })(
    window,
    document,
    'script',
    'https://ssl.google-analytics.com/analytics.js',
    'ga'
  );

  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('set', 'checkProtocolTask', null);
  ga('send', 'pageview', '/popup.html');

これで基本popup.htmlを開いたタイミングのトラッキングが可能になります。公式ページにある内容のにはanalytics.jsのURLがwww.google-analytics.comとなっていますが、このままだと私の場合以下のエラー文の通りCSPで怒られてしまいました。

Refused to load the script 'https://www.google-analytics.com/analytics.js' because it violates the following Content Security Policy directive: "script-src 'self' https://ssl.google-analytics.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

もしかすると私の記述がおかしかったのかもですが、www.google-analytics.comをssl.google-analytics.comにしてあげると通ったので単純にCSPのセキュリティレベルが上がったのかなと思います。
ファイル自体は一緒ですし、manifest.jsonのCSP指定も統一しても怒られたのでwwwで同じ現象になった方はsslにしてみると良いかもしれません。

あとChrome拡張機能の配信ページも一緒にトラッキングしたい場合は、ダッシュボードから該当の拡張機能の編集ページに入り、ストアの掲載情報タブの一番下にGAIDを入力する箇所があるので入力します。
これで配信ページのトラッキング情報も確認することが出来ます。

ホームへ戻る