최적화 도구는 구글이 내놓은 A/B Test(다변수 테스트, 리디렉션 테스트)를 사용 할 수 있는 솔루션이다.

A/B테스트를 통해서 자신의 웹사이트를 최적화함에 있어 많은 문제들이 발생하겠지만 그 문제들중 플리커(page Flicker)를 해결해 줄수있는 hiding snippet에 대해 알아보자. 문제에 앞서 플리커란 DOM(문서 객체 모델)을 수정하여 웹사이트 방문자에게 여러버전을 보여줄 때, 일부 경우에서 최종 사용자에게 이미 표시된 요소가 변경이 되기도 한다. 이는 미리 로드되어있는 페이지에 최적화 도구 컨테이너가 로드되면서 해당 부분을 덮는다고 이해하면 쉽다. 이와 같이 표시될때에 테스트 중인 부분이 깜빡임처럼 보여지는데 이것을  플리커(page flicker)라고 한다.
google optimize에서는 플리커가 발생하지 않도록 hiding snippet을 권장한다.

이 snippet은 최적화 도구 컨테이너가 로드될 때
페이지를 임시로 감추어 주는 역할을 한다.

이후 특정 시간이 지난 후 다시 모든 tag를 화면상에 보여주도록 변경한다.

 

hiding snippet의 코드는 다음과 같다.

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

코드 내에 붉은 영역(4000, GTM-XXXXXX)
–4000: 4초간 모든 tag를 투명하게 변경. 해당 사이트 실험 내용에 맞게 초를 지정할 수 있다.
–GTM-XXXXXX: GTM 컨테이너 id가 아닌 Optimize의 컨테이너 id를 적용하면 된다. 만약 Optimize 코드를 두 개 이상 사용할 경우 (‘GTM-XXXXXX’:ture,’GTM-XXXXXX’:ture)와 같이 적용할 수 있다.

*hiding snippet을 적용할 때 해당 코드는 꼭 코드내에 삽입되어야하며 head영역의 최상단에 위치해야 한다. snippet 삽입 시 GTM을 사용하지 않아야 오류를 막을수 있다(페이지 로드 시 GTM컨터이너가 실행 될때 발동 됨으로 사용자에게 오류라는 착각을 일으킬 수 있음).  그리고 실험을 진행하는 페이지에만 임시적으로 적용했다 제거해야 한다.