홈페이지에 Analytics (이하 _ga) 코드를 심지않고 태그매니저(GTM)로 Google Optimize 데이터를 추적하는 방법에 대해 알아보겠습니다.
참고: https://support.google.com/tagmanager/
참고: https://support.google.com/tagmanager/
Google 태그 관리자를 통해 최적화 도구 플러그인을 게재할 수는 있지만, 홈페이지 속도가 느려질 수 있기 때문에, 구글은 대체로 직접 _ga 코드를 수정하여 심는 방법을 권장합니다.
태그 관리자를 통해 최적화 도구가 게재될 때
GTM 컨테이너가 최적화 도구 컨테이너보다 먼저 로드되어야 합니다.
그러면 태그 관리자와 최적화 도구 컨테이너가 모두 로드된 후에만 최적화 도구 실험이 실행됩니다.
GTM 컨테이너가 최적화 도구 컨테이너보다 먼저 로드되어야 합니다.
그러면 태그 관리자와 최적화 도구 컨테이너가 모두 로드된 후에만 최적화 도구 실험이 실행됩니다.
태그관리자로 추적하기
1단계: 필요한 정보 수집
태그 관리자에서 직접 최적화 도구 태그를 배포하려면 다음 정보가 필요합니다.
- 애널리틱스 속성 ID - 애널리틱스에서 확인
- 최적화 도구 컨테이너 ID - 최적화 도구에서 확인
- 맞춤형 애널리틱스 추적기 설정을 사용하는 태그 관리자의 모든 애널리틱스 태그
 |
| 애널리틱스 속성 ID |
 |
| 최적화 도구 컨테이너 ID |
2단계: 태그 관리자에서 최적화 도구 태그 구성
- Tags → New를 선택하여 새로운 태그를 생성합니다.
- 제목: "Optimize - www.example.com" 을 지정해 주세요
- Tag Configuration → Google Optimize 를 선택합니다.
- 연동해 줄 Google Analytics Tracking ID 와 Optimize container ID 지정해 줍니다. (참고; Optimize snippet ID는 설정 페이지에서 찾을 수 있습니다.)
- More settings(추가설정) 을 누르시고 Fields to Set → Advanced Configuration에서 구글 태그와 같이 설정해 줍니다.
- 트리거는 생성하지 않은 채 "저장" 버튼을 눌러주세요
- Google Optimize 태그를 실행할 _ga analytics 페이지 뷰 트리거를 열어줍니다.
- Tag Configuration,을 눌러주세요. 그리고 Advanced Settings → Tag Sequencing를 선택합니다.
- 이 태그가 실행되기 전에 태그를 실행하려면 확인란을 선택하고 Google 최적화 태그를 '설정 태그'로 선택하십시오.
- 저장 하시면 이 페이지에 대한 optimize 설정이 다 되었습니다. 추가로 세팅을 하고 싶은 페이지에 다시 같은 작업을 반복해 주시면 됩니다~
3단계: 페이지 숨김 스니펫 추가
마지막으로 웹페이지에 페이지 숨김 스니펫을 설치하세요.
선택사항이지만 페이지 깜박임의 위험을 크게 줄이고
연결이 느릴 때 사용자에게 더 나은 환경을 제공하는 데 도움이 됩니다.
선택사항이지만 페이지 깜박임의 위험을 크게 줄이고
연결이 느릴 때 사용자에게 더 나은 환경을 제공하는 데 도움이 됩니다.
<!-- 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.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);
})(window,document.documentElement,'async-hide','dataLayer',4000,{'GTM-XXXXXX':true});
</script>
Note:
GTM-XXXXXX 부분을 Tag Manager container ID 바꿔주세요 (Optimize ID 아닙니다...)
최적화 도구 플러그인을 사용하는 각 페이지의
수정된 Google 애널리틱스 추적 코드 바로 앞에 페이지 숨김 스니펫을 최대한 빨리 추가하세요.
다음에는 Optimize의 작동에 대해서도 다뤄보겠습니다~^^
<HEAD>에 수정된 Google 애널리틱스 추적 코드 바로 앞에 페이지 숨김 스니펫을 최대한 빨리 추가하세요.
다음에는 Optimize의 작동에 대해서도 다뤄보겠습니다~^^
댓글 쓰기