Googleタグマネージャー使用時のGoogleオプティマイズの設定

Posted on by 伊藤 太佑

タグマネージャーを使うことでGoogleオプティマイズがカンタンに設定できるのですが、タグマネージャー内だけでは設定できない部分があるのはご存知でしょうか？
それは「ページ非表示スニペット」と呼ばれるもので、これはページのちらつき（テストでの変更前のものが一瞬表示されてからテストの変更が適用される）を防ぐものです。
必須ではないですが推奨設定です。

ページ非表示スニペットのコードは下記になります。

<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-XXXXXX':true});</script>

これをのセクションの一番最初に設置するのがベストです。
設置イメージが下記になります。

<head>
  <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-XXXXXX':true});</script>

  //Googleタグマネージャーのコード以前に記述が必要なもの（ex.dataLayerの記述）

  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXX');</script>
  <!-- End Google Tag Manager -->

</head>
<body>
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->

  //以下ご自由に

</body>

Googleオプティマイズをタグマネージャーで設置している場合なので、GTM-XXXXXXの部分はタグマネージャーのコンテナIDが入りますので、ご注意ください。

詳しくは：https://developers.google.com/optimize/?hl=ja

一覧へ