オプティマイズのページ非表示スニペットの使用方法

このガイドでは、Google オプティマイズのページ非表示スニペットの使用方法を解説します。このスニペットを使用することで、オプティマイズのコンテナの非同期的に読み込んでいる間、テストによる変更を適用する前のページがユーザーに見えてしまわないよう、ページを隠しておくことができます。

ページ非表示スニペットのコード

サイトにページ非表示スニペットを追加するには、オプティマイズのコンテナ読み込みを行うすべてのページで、下記のコードを <head> セクションに挿入します。追加位置は、ページ内の他のコードよりも前にしてください。コード内で「GTM-XXXXXX」となっている箇所は、実際のオプティマイズ コンテナ ID に置き換える必要があります。

<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>

以下は、オプティマイズ ページ非表示スニペットの仕組みを理解しやすいよう、コメントを入れたバージョンです。

<!-- Optimize page-hiding CSS code -->
<style>
/* Sets the opacity of any element with this class to 0 */
.async-hide {
  opacity: 0 !important
}
</style>

<!-- Optimize page-hiding JavaScript code -->
<script>
/**
 * Adds a class to the <html> element that hides the page until the Optimize
 * container is loaded and the experiment is ready. Once Optimize is ready
 * (or 4 seconds has passed), the class is removed from the <html> element
 * and the page becomes visible again.
 *
 * @param {Window} a The global object.
 * @param {HTMLHtmlElement} s The <html> element.
 * @param {string} y The name of the class used to hide the <html> element.
 * @param {string} n The name of property that references the dataLayer object.
 * @param {number} c The max time (in milliseconds) the page will be hidden.
 * @param {Object} h An object whose keys are Optimize container IDs.
 * @param {undefined} i (unused parameter).
 * @param {undefined} d (unused parameter).
 * @param {undefined} e (unused parameter).
 */
(function(a, s, y, n, c, h, i, d, e) {
  // Adds a class (defaulting to 'async-hide') to the <html> element.
  s.className += ' ' + y;

  // Keeps track of the exact time that the snippet executes.
  h.start = 1*new Date;

  // Creates a function and assigns it to a local variable `i` as well as
  // the `end` property of the Optimize container object. Once Optimize is
  // loaded it will call this function, which will remove the 'async-hide'
  // class from the <html> element, causing the page to become visible again.
  h.end = i = function() {
    s.className = s.className.replace(RegExp(' ?' + y), '');
  };

  // Initalizes the dataLayer as an empty array if it's not already initialized
  // and assigns the passed Optimize container object to the dataLayer's `hide`
  // property. This makes the function defined above accessible globally at the
  // path `window.dataLayer.hide.end`, so it can be called by Optimize.
  (a[n] = a[n] || []).hide = h;

  // Creates a timeout that will call the page-showing function after the
  // timeout amount (defaulting to 4 seconds), in the event that Optimize has
  // not already loaded. This ensures your page will not stay hidden in the
  // event that Optimize takes too long to load.
  setTimeout(function() {
    i();
    h.end = null
  }, c);
  h.timeout = c;
})(
    window, // The initial value for local variable `a`.
    document.documentElement, // The initial value for local variable `s`.
    'async-hide', // The initial value for local variable `y`.
    'dataLayer', // The initial value for local variable `n`.
    4000, // The initial value for local variable `c`.
    {'GTM-XXXXXX': true} // The initial value for local variable `h`.
);
</script>

ページ非表示スニペットのカスタマイズ

ページ非表示スニペットのカスタマイズが必要になることがあります。たとえば次のようなケースです。

  • 複数のオプティマイズ コンテナの読み込みをサポートするため
  • コールバックのタイムアウトを延長するため
  • <html> 要素に追加されたクラスの名前を変更するため

複数のコンテナの読み込み

オプティマイズのコンテナを複数読み込む場合、すべてのコンテナの読み込みが終わるまでページが非表示のままとなるよう、スニペットをカスタマイズすることができます。

指定するコンテナの数を増やすには、スニペット末尾のコンテナ オブジェクトにキーを追加します。コンテナ GTM-XXXXXX および GTM-YYYYYY の読み込み完了を待機するコードは次のようになります。

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

タイムアウトの変更

オプティマイズの読み込みに時間がかかりすぎているときに、<html> 要素から .async-hide クラスを削除するまでのデフォルト待機時間を変更するには、スニペット末尾でパスする数値を変更します。

ページを表示するまでの待機時間を 5,000 ミリ秒に設定する場合、コードは次のようになります。

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

async-hide クラスの名前の変更

async-hide クラスの名前がすでに CSS で定義されている場合に、別の名前を指定することができます。名前を変更するには、<style> タグとスニペット末尾でパスする引数の両方で、クラスを更新します。

クラスの名前を async-hide ではなく optimize-loading にする場合、コードは次のようになります。

<style>.optimize-loading { 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,'optimize-loading','dataLayer',4000,
{'GTM-XXXXXX':true});</script>