新しいGA「gtag.js」を使うとGoogle Optimize実践まで超簡単だった

やりたいこと

gtag.jsを使用しているサイトで、Google Optimizeをやりたい。

実際導入して見たら、思った以上に簡単でした。
導入の調査を開始した直後はGoogle Tag Managerの導入も必要そうで、少し億劫に感じていました。

別に他に広告などでGTMが必要な場面はないからなぁ
なんだかすごそうなOptimizeだけサクッと試したいのに・・。

という方は多いと思います。

状況/環境

• Google Tag Managerを使っていない
• analytics.jsからgtag.jsにアップデートした
• gtag.jsによるトラッキングは正常。Google AnalyticsでPVなどを見ている
• マーケティングの観点からOptimizeでA/Bテストをやりたい

方法

gtag.jsのみをインストールしている状態

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-99999999-9"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-99999999-9', {});
</script>

↑を↓のようにします。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-99999999-9"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-99999999-9', {
    'optimize_id': 'GTM-AAAA9AA'
  });
</script>

追加されたのは、下から3行目の 'optimize_id': 'GTM-AAAA9AA' だけ。
このGTM-AAAA9AAはOptimizeのアカウント管理画面で「コンテナID」と表示されているものです。

フリッカー対策

Optimizeを実践すると、ページロード完了時に一瞬オリジナルのページが表示され、その後テスト用のページになります。
それの対策として、page_hiding_snippet と呼ばれるコードがあります。

用は、ページを表示するまでに一瞬の間を置くだけのコードです。
これは以下の様にgtag.jsに上に設置します。

<!-- Page hiding snippet (recommended)  -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',500,
{'GTM-AAAA9AA':true});</script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-99999999-9"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-99999999-9', {
    'optimize_id': 'GTM-AAAA9AA'
  });
</script>

window,document.documentElement,'async-hide','dataLayer',500, {'GTM-AAAA9AA':true} の 500 のところを調整すると「間」が調整できます。
ユーザーに違和感を感じさせないギリギリでいつも生きていきましょう。

完了

あとはOptimizeの管理画面で、テストを作成・実施します。

以上がgtag.jsを使用している画面でのGoogle Optimizeの利用方法です。
導入だけでみると驚くほど簡単でした。

皆さんもぜひ！

参考

以下のページが日本語訳されれば、みんな幸せになれる気がします！！
Deploy Optimize using gtag.js