Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@kent_ear

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

More than 3 years have 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

6
Help us understand the problem. What is going on with this article?
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
kent_ear
freeeエンジニア 母校である立教大学生向けwebサービスをやっています ずっとwebサービス作りやっていきたい
freee
スモールビジネスのバックオフィス業務をテクノロジーで自動化し、日本のスモールビジネスを元気にする

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?