최적화 도구 깜박임 방지 스니펫 사용하기

이 가이드에서는 최적화 도구 깜박임 방지 스니펫을 사용하는 방법을 설명합니다. 최적화 도구 깜박임 방지 스니펫은 컨테이너가 준비될 때까지 페이지를 숨기는 동시에 최적화 도구 컨테이너를 비동기식으로 로드하는 것을 지원하여, 실험에서 페이지를 수정하기 전에 초기 페이지 콘텐츠가 표시되지 않도록 합니다.

깜박임 방지 스니펫 코드

사이트에 깜박임 방지 스니펫을 추가하려면 최적화 도구 컨테이너를 로드하는 모든 페이지의 <head> 섹션에 페이지의 다른 코드보다 먼저 아래의 코드를 삽입하세요. 또한 다음과 같이 OPT-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,
{'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>

제한 시간 변경하기

최적화 도구가 로드하는 데 시간이 너무 오래 걸리는 경우, 최적화 도구가 <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,
{'OPT-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,
{'OPT-XXXXXX':true});</script>