Panduan ini menjelaskan cara menggunakan cuplikan anti-pergantian tampilan halaman Optimize, yang mendukung pemuatan penampung Optimize secara asinkron saat menyembunyikan halaman hingga penampung siap, sehingga memastikan pengguna tidak melihat konten halaman awal sebelum diubah oleh eksperimen.
Kode cuplikan anti-pergantian tampilan halaman
Untuk menambahkan cuplikan anti-pergantian tampilan halaman ke situs, sisipkan kode berikut di bagian <head> pada setiap halaman yang memuat penampung Optimize, sebelum kode lainnya di halaman tersebut. Anda juga harus mengganti string OPT-XXXXXX dengan ID penampung Optimize:
<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>
Agar lebih memahami cara kerja cuplikan anti-pergantian tampilan halaman Optimize, lihat versi yang dikomentari di bawah:
<!-- 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>
Menyesuaikan cuplikan anti-pergantian tampilan halaman
Terkadang, Anda perlu menyesuaikan cuplikan anti-pergantian tampilan halaman. Berikut adalah alasan yang paling umum:
- untuk mendukung pemuatan beberapa penampung Optimize
- untuk memperpanjang waktu tunggu callback
- untuk mengubah nama class yang ditambahkan ke elemen
<html>
Memuat beberapa penampung
Jika memuat beberapa penampung Optimize, Anda dapat menyesuaikan cuplikan untuk memastikan halaman tetap tersembunyi hingga semua penampung dimuat.
Untuk menentukan lebih dari satu penampung, tambahkan kunci tambahan ke objek penampung di akhir cuplikan. Kode berikut akan menunggu penampung OPT-XXXXXX dan OPT-YYYYYY dimuat:
<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>
Mengubah waktu tunggu
Untuk mengubah waktu tunggu default Optimize sebelum menghapus class .async-hide dari elemen <html> (jika Optimize membutuhkan waktu terlalu lama untuk memuat), perbarui angka yang diteruskan di akhir cuplikan.
Kode berikut akan menunggu selama 5.000 milidetik sebelum menampilkan halaman:
<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>
Mengubah nama class async-hide
Jika nama class async-hide sudah ditetapkan di CSS, Anda dapat memilih nama lain. Untuk mengubah nama, perbarui class di tag <style> serta argumen yang diteruskan di akhir cuplikan.
Kode berikut akan menggunakan class optimize-loading, bukan 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>