やりたいこと
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