대상
이 도움말은 optimize.js(동기식)로 최적화 도구를 설치하려는 고객을 위한 도움말입니다.
다음 단계에 따라 웹사이트에 최적화 도구를 설치하세요.
기본 요건
웹사이트에 스니펫을 설치하려면 다음 항목이 필요합니다.
- Google 애널리틱스 계정 및 속성
- 웹사이트에 설치된 Google 애널리틱스 속성
- Google 애널리틱스 속성에 연결된 Google 최적화 도구 계정 및 컨테이너
- 웹사이트 소스 코드를 수정할 수 있는 능력
최적화 도구 설정하기에서 이 단계를 자세히 검토할 수 있습니다.
optimize.js(동기식)로 최적화 도구 설치하기
최적화 도구의 동기(sync) 버전은 최상의 성능을 제공하며 웹사이트의 렌더링 속도에 최소한의 영향을 미치므로 대부분의 사용자에게 권장됩니다.
최적화 도구 스니펫(아래)을 웹페이지의 <HEAD> 상단에 추가하세요.
OPT_CONTAINER_ID를 최적화 도구 컨테이너 ID로 변경합니다.대부분의 경우 동기 스니펫을 사용할 때는 깜박임 방지 스니펫이 필요하지 않습니다.
스니펫 게재위치 관련 권장사항
최적의 성능을 위해서는 최적화할 모든 웹페이지에 있는 <HEAD> 태그 상단에 최적화 도구 스니펫을 추가하세요.
최적화 도구 스니펫 위에는 다음 항목만 표시되어야 합니다.
- 모든 dataLayer 초기화 코드. 참고: dataLayer 변수는 깜박임 방지 스니펫(사용된 경우) 뒤에 다시 지정하지 않아야 합니다.
- 구현 또는 타겟팅에서 사용하는 jQuery 또는 자바스크립트 라이브러리처럼 최적화 도구에서 사용하는 자바스크립트 변수, 함수, 설정 쿠키를 선언하는 스크립트. 참고: 기본적으로 최적화 도구는 jQuery를 설치하지 않습니다.
- 페이지 깜박임을 해결할 때 사용되는 깜박임 방지 스니펫(선택사항)
콘텐츠 보안 정책을 사용하는 경우 최적화 도구 보안 요구사항을 참조하여 콘텐츠 보안 정책이 사이트에서 스니펫에 도메인을 허용하는지(예: google-analytics.com 또는 googleoptimize.com) 확인하세요.
최적화 도구 설치 확인하기
최적화 도구가 원활하게 실행되는지 확인할 수 있는 가장 좋은 방법은 간단한 맞춤설정을 만든 다음 설치 진단 및 미리보기 모드를 사용하여 브라우저에서 예상대로 렌더링되는지 확인하는 것입니다.
페이지 깜박임 해결하기
자바 스크립트 플리커, DOM 플리커, FOUC(스타일 지정이 없는 콘텐츠 플래시) 및 FOUT(스타일 지정이 없는 텍스트) 플래시라고도 하는 페이지 깜박임은 모든 정보가 검색되기 전에 브라우저 엔진이 웹페이지를 렌더링하는 경우 발생합니다. 이 페이지는 브라우저의 기본 스타일로 잠깐 표시되었다가 새 스타일 규칙이 로드되고 적용된 후 다시 로드됩니다.
웹 환경에서 깜박임이 감지되는 경우 먼저 최적화 도구 스니펫을 HTML의 <HEAD> 상단으로 이동하세요. 깜박임이 계속 지속되는 경우 깜박임 방지 스니펫을 설치하고 필요에 맞게 맞춤설정하세요.
이전 최적화 도구 스니펫 삭제
웹사이트에 이전 최적화 도구 스니펫이 설치되어 있으면 사이트에 다시 태그를 추가하기 전에 기존 스니펫을 삭제해야 합니다.
최적화 도구 스니펫을 삭제하는 방법
최적화 도구를 제거하는 방법은 a) 웹사이트에 최적화 도구가 설치된 방법과 b) Google 애널리틱스가 구현된 방법에 따라 달라집니다. 이 정보가 있으면 아래 안내에 따라 최적화 도구 스니펫을 삭제하세요.
| 최적화 도구 설치 |
Google 애널리틱스 측정 |
안내 |
|---|---|---|
| GTM | – | 태그 관리자를 통해 최적화 도구 태그를 삭제합니다. 자세히 알아보기 |
| analytics.js | GTM | 페이지에서 analytics.js 스니펫을 삭제합니다. |
| gtag.js | GTM | 페이지에서 gtag.js 스니펫을 삭제합니다. 자세히 알아보기 |
| gtag.js | gtag.js | gtag.js 스니펫에서 'optimize_id' 구성 매개변수를 삭제합니다(아래 예시 A 참고). |
| analytics.js | analytics.js | 'ga(‘require’, ‘OPT_CONTAINER_ID’)' 줄을 삭제합니다(아래 예시 B 참조). |
예시 A
gtag.js를 통해 최적화 도구가 설치되어 있고 gtag.js에 의해 GA 측정이 수행된 경우gtag.js 스니펫에서 'optimize_id' 구성 매개변수를 삭제합니다.
다음과 같이 변경합니다.from:
gtag('config', 'GA_MEASUREMENT_ID', {, { 'optimize_id': 'OPT_CONTAINER_ID'});
to:
gtag('config', 'GA_MEASUREMENT_ID', {
예시 B
analytics.js를 통해 최적화 도구가 설치되고 analytics.js를 통해서만 해당 페이지가 추적된 경우 analytics.js 스니펫에서 'ga('require' 줄을 삭제합니다.
다음과 같이 변경합니다.
ga('create', 'GA_MEASUREMENT_ID', 'auto');
ga('require', 'OPT_CONTAINER_ID');
ga('send', 'pageview');
to:
ga('create', 'GA_MEASUREMENT_ID', 'auto')
ga('send', 'pageview')
이전에 깜박임 방지 스니펫을 설치한 경우 동시에 삭제해야 합니다.