깜박임 방지 스니펫 설치하기

페이지 깜박임이 감지되는 경우 이 스니펫을 추가하면 도움이 됩니다.

소개

스니펫 설치 도움말스니펫 게재위치 권장사항(아래)을 따르면 웹페이지가 페이지를 표시하는 데 필요한 다른 리소스보다 우선적으로 최적화 도구를 로드합니다. 페이지에 최적화 도구가 먼저 로드되면 깜박임이 나타나지 않으므로, 깜박임 방지 스니펫을 설치하지 않아야 합니다.

브라우저의 기본 스타일로 웹페이지가 잠시 표시되고 외부 CSS 스타일시트를 다시 렌더링하면서 스타일이 재지정되는 요소가 페이지에 일시적으로 '표시'될 때 페이지 깜박임이 발생합니다.

최적화 도구가 로드될 때 페이지 깜박임을 해결하는 가장 효과적인 방법은 최적화 도구 컨테이너가 로드되는 동안 페이지를 일시적으로 숨기는 것입니다. 이를 위해 페이지의 첫 번째 스크립트로 깜박임 방지 스니펫을 추가합니다.

페이지 깜박임이 발생하면 문제를 해결하기 전에 Google 스니펫 설치 도움말권장사항의 모든 단계를 따랐는지 확인합니다.

특히 웹사이트 HTML의 <HEAD>에서 최적화 도구 스니펫이 가능한 한 상단에 설치되어 있는지 확인해야 합니다. 스니펫을 <HEAD> 상단에 추가하면 깜박임 문제가 대부분 해결됩니다.

잠재고객

다음은 최적화 도구 실험 환경 페이지에서 페이지 깜박임이 발생하는 고객을 위한 도움말입니다.

아래와 같은 경우에는 깜박임 방지 스니펫을 설치하지 마세요.

  • 최적화 도구 스니펫이 <HEAD> 상단에 없는 경우
  • 페이지 깜박임이 보이지 않는 경우
  • 첫 번째 로드에서 변경사항을 실행하지 않는 활성화 이벤트를 사용하는 경우
  • Google 태그 관리자(GTM)와 같은 태그 관리 시스템(TMS)을 사용하는 경우

TMS에 AFS 사용 여부

Google 태그 관리자(GTM)와 같은 태그 관리 시스템(TMS)을 사용하여 깜박임 방지 스니펫(AFS)을 설치하지 마세요.
깜박임 방지 스니펫은 웹페이지에 직접 인라인으로만 설치해야 하며, 태그 관리 시스템(TMS) 또는 다른 비동기 스크립트를 사용하여 설치해서는 안 됩니다. 깜박임 방지 스니펫을 인라인으로 설치할 수 없는 경우 이 단계를 건너뛰어야 합니다.

페이지 깜박임 해결하기

위 단계를 따른 후에도 최적화 도구가 로드될 때 페이지 깜박임이 발생하는 경우, 최적화 도구 컨테이너가 로드되는 동안 페이지를 일시적으로 숨기는 것이 가장 효과적인 해결 방법입니다. 이를 위해 페이지의 첫 번째 스크립트로 깜박임 방지 스니펫을 추가합니다.

작동 방식

최적화 도구는 DOM(문서 객체 모델)을 수정하여 웹사이트 방문자에게 여러 버전을 보여줍니다. 최종 사용자에게 이미 표시된 요소가 변경되기도 합니다. 이와 같이 표시되는 변경사항을 페이지 깜박임(page flicker)이라고 합니다.

브라우저의 기본 스타일로 웹페이지가 잠시 표시되고 외부 CSS 스타일시트를 다시 렌더링하면서 스타일이 재지정되는 요소가 페이지에 일시적으로 '표시'될 때 페이지 깜박임이 발생합니다.

깜박임 방지 스니펫 배포하기

깜박임 방지 스니펫을 설치하려면 다음 단계를 따르세요.

  1. 아래 코드를 복사하여 최적화 도구를 사용하는 모든 페이지 <HEAD>의 최대한 앞에 추가합니다. dataLayer 선언을 사용하는 경우 그 다음에 추가합니다.
  2. 최적화 도구 스니펫 또는 태그 관리자 컨테이너가 깜박임 방지 스니펫을 즉시 따르는지 확인합니다.

예: 깜박임 방지 스니펫

<HTML>
<HEAD>
<!-- anti-flicker snippet (recommended)  -->
<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,
{'CONTAINER_ID':true});</script>

참고: CONTAINER_ID를 최적화 도구 컨테이너 ID로 변경합니다. Google 태그 관리자를 사용하여 최적화 도구를 배포하고 있다면 CONTAINER_ID를 태그 관리자 컨테이너 ID로 바꿉니다.

깜박임 방지 스니펫 위의 dataLayer를 초기화해야 합니다. 그렇지 않으면 사이트 성능에 부정적인 영향이 미칩니다. 페이지의 데이터 영역을 나중에 재정의하지 마세요.

스니펫 게재위치 관련 권장사항

최적의 성능을 위해서는 최적화할 모든 웹페이지에 있는 <HEAD> 태그 상단에 최적화 도구 스니펫을 추가하세요.

최적화 도구 스니펫 위에 표시되어야 하는 항목은 다음과 같습니다.

  1. 모든 dataLayer 초기화 코드. 참고: dataLayer 변수는 깜박임 방지 스니펫(사용된 경우) 뒤에 다시 지정하지 않아야 합니다.
  2. 구현 또는 타겟팅에서 사용하는 jQuery 또는 자바스크립트 라이브러리처럼 최적화 도구에서 사용하는 자바스크립트 변수, 함수, 설정 쿠키를 선언하는 스크립트. 참고: 기본적으로 최적화 도구는 jQuery를 설치하지 않습니다.
  3. 페이지 깜박임을 해결할 때 사용되는 깜박임 방지 스니펫(선택사항)

깜박임 방지 스니펫을 맞춤 설정하기

깜박임 방지 스니펫은 시간이 너무 오래 걸리는 경우 실험 변경사항의 적용 시도를 중단하는 설정이 가능한 시간 제한 기능을 포함하고 있습니다. 시간 제한이 만료되면 페이지의 숨김을 해제하고 사용자에게 새 환경이 표시되지 않는 대신 기본 콘텐츠가 표시됩니다.

깜박임 방지 스니펫 맞춤 설정에 대해 자세히 알아보기

태그 관리자 사용자

Google 태그 관리자를 사용해 최적화 도구를 배포하려면 최적화 도구 컨테이너 ID가 아닌 태그 관리자 컨테이너 ID를 깜박임 방지 스니펫에 넣으세요.

태그 관리자 컨테이너에 최적화 도구 태그를 추가하면 최적화 도구가 로드될 때까지 페이지 깜박임이 방지되지만, 나중에 해당 태그를 사용 중지해도 페이지에 영향이 없습니다.

Google 태그 관리자로 최적화 도구 설치하는 방법 자세히 알아보기

이름 확인하기

페이지 깜박임은 자바스크립트 플리커, DOM 플리커, FOUC(스타일 지정이 없는 콘텐츠 플래시) 및 FOUT(스타일 지정이 없는 텍스트) 플래시라고도 합니다. 이전에는 페이지 숨김 스니펫을 깜박임 방지 스니펫이라고 했습니다.

도움이 되었나요?
어떻게 하면 개선할 수 있을까요?
검색
검색어 지우기
검색 닫기
Google 앱
기본 메뉴
도움말 센터 검색
true
101337
false