Shopify:Google Analytics無効リンクを設置

やりたいこと

Shopify のストアを EU のプライバシー・ポリシーに対応させるために、Google Analytics の無効化リンク(オプトアウト)を設置したい。

なお、プライバシー・ポリシーは Trusted Shops により自動生成した。

Google Analytics無効リンクの設置

無効リンクの実装例は次の通り。

Additional Google Analytics JavaScript

Shopify 管理画面より、「Online Store > Preference」と進み、「Additional Google Analytics JavaScript」に以下のJSスニペットを追記する。

// Set to the same value as the web property used on the site
const gaProperty = 'UA-YOURID-1';
// Disable tracking if the opt-out cookie exists.
const disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
  window[disableStr] = true;
}

Google Analytics 無効化ページ

読み込み時に Google Analytics 無効化の処理が走るページを作成する。

Shopify 管理画面より、「Online Store > Pages」と進み、新規ページを作成。

本文の編集をコードモードに切り替え、次の HTML + JS を書く。(ドイツ語の場合の例)

<meta charset="utf-8" />
<div style="text-align: center;">
<pre class="tw-data-text tw-ta tw-text-medium" data-placeholder="Translation" id="tw-target-text" data-fulltext="" dir="ltr"><span lang="de" tabindex="0">Wird bearbeitet...</span></pre>
</div>
<script>// <![CDATA[
// Set to the same value as the web property used on the site
  const gaProperty = 'UA-YOURID-1';
  // Disable tracking if the opt-out cookie exists.
  const disableStr = 'ga-disable-' + gaProperty;
// Opt-out function
  function gaOptout() {
    document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
    window[disableStr] = true;
    console.log('Google Analytics deaktiviert!');
  }
  $(document).ready(function() {
    if(confirm('Google Analytics deaktivieren?')){
      gaOptout();
      $('main .rte span').html('Abgeschlossen!');
    } 
  });
// ]]></script>

ポイント

  • ページ読み込み時にダイアログで無効化するか再確認する
  • 確認後に無効化処理を走らせ、本文を「処理中→完了!」に変更する

フッターにリンク設置

あとは、上で作成したページのリンクをフッターメニューなどに追加すればOK。

以上!

Sources

兵庫県西宮市生まれのフリーランスRailsエンジニア。海外を拠点にデジタルノマド生活中。/ 前職・資格:公認会計士 / プログラミング言語:Ruby, JavaScript, HTML, CSS / 日本語・英語
コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です