5
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

新しい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-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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
5
Help us understand the problem. What are the problem?