Из этого руководства вы узнаете, как использовать фрагмент кода Оптимизации, скрывающий страницу, с помощью которого можно асинхронно загружать контейнер оптимизации и не показывать страницу до тех пор, пока он не загрузится. Таким образом пользователи не будут видеть исходный контент страницы до внесения изменений в результате эксперимента.
Фрагмент, скрывающий страницу
Чтобы добавить на сайт фрагмент, скрывающий страницу, разместите приведенный ниже код в самом начале раздела <head> на каждой странице, загружающей контейнер Оптимизации. Кроме того, нужно заменить строку OPT-XXXXXX идентификатором контейнера Оптимизации.
<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,
{'OPT-XXXXXX':true});</script>
Чтобы лучше понять, как работает фрагмент кода Оптимизации, скрывающий страницу, см. версию с комментариями ниже:
<!-- Optimize anti-flicker CSS code -->
<style>
/* Sets the opacity of any element with this class to 0 */
.async-hide {
opacity: 0 !important
}
</style>
<!-- Optimize anti-flicker 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), '');
};
// Initializes 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`.
{'OPT-XXXXXX': true} // The initial value for local variable `h`.
);
</script>
Настройка фрагмента, скрывающего страницу
В некоторых случаях фрагмент, скрывающий страницу, нужно настроить. Это может произойти по одной из следующих причин:
- поддержка загрузки нескольких контейнеров Оптимизации;
- продление времени ожидания обратного вызова;
- изменение названия класса, добавленного в элемент
<html>.
Загрузка нескольких контейнеров
При загрузке нескольких контейнеров Оптимизации можно настроить фрагмент таким образом, чтобы страница была скрыта до того момента, когда загрузятся все контейнеры.
Чтобы указать несколько контейнеров, добавьте дополнительные ключи в объект контейнера в конце фрагмента. Следующий код будет ожидать загрузки контейнеров OPT-XXXXXX и OPT-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,
{'OPT-XXXXXX':true,'OPT-YYYYYY':true});</script>
Изменение времени ожидания
Чтобы изменить установленное по умолчанию время ожидания Оптимизации перед удалением класса .async-hide из элемента <html> (в случае, если Оптимизация загружается слишком долго), обновите число, которое передается в конце фрагмента.
Следующий код устанавливает время ожидания перед показом страницы в 5000 миллисекунд:
<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,
{'OPT-XXXXXX':true});</script>
Изменение имени класса async-hide
Если имя класса async-hide уже определено в CSS, вы можете поменять его. Для этого обновите название в теге <style>, а также в аргументе, передаваемом в конце фрагмента.
Следующий код будет использовать класс optimize-loading вместо async-hide:
<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,
{'OPT-XXXXXX':true});</script>