Edited at

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

More than 1 year has passed since last update.


やりたいこと

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-AAAA9AAOptimizeのアカウント管理画面で「コンテナ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