2018年8月現在、オプティマイズの設定方法は、アナリティクスのタグ別に2つ用意されている。

オプティマイズでABテストを行いたいが、タグの設定が分からない。そんな方へ向けてご説明します。オプティマイズ設定はアナリティクスの analytics.jsと gtag.js 向けにそれぞれ別の設定が必要です。

analytics.jsと gtag.jsの違いがわからない方は
gtm.js gtag.js analytics.js タグの違い
をご参照ください。

ABテストを行いたいページに設定を行う

アナリティクスanalytics.jsでオプティマイズを使いたい場合

オプティマイズを設定するページ<head>直下に下記コードを設置。
*GTM-*****はオプティマイズのコンテナID、UA-*****-*はアナリティクスのIDそれぞれ必用な番号に置き換える。

<!-- 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',4000,
{'GTM-*****':true});</script>
<!-- Modified Analytics tracking code with Optimize plugin -->
  <script>
    (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://www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-*****-*', 'auto');
    ga('require', 'GTM-*****');
    ga('send', 'pageview');
    </script>

アナリティクスgtag.jsでオプティマイズを使いたい場合

オプティマイズを設定するページ<head>直下に下記コードを設置。
*GTM-*****はオプティマイズのコンテナID、UA-*****-*はアナリティクスのIDそれぞれ必用な番号に置き換える。


<!-- 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',4000,
{‘GTM-*****':true});</script>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src=“https://www.googletagmanager.com/gtag/js?id=UA-*****-*"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments)};
 gtag('js', new Date());
 gtag(‘config’, ‘UA-*****-*, { ‘optimize_id’: ‘GTM-*****'});
</script>