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

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

タグマネージャーを使うことで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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください