Accelerated Mobile Pages 프로젝트(AMP)는 웹 콘텐츠의 성능을 개선하는 데 유용한 오픈소스 웹 플랫폼입니다. AMP는 Google 태그 관리자를 위한 기본 지원을 제공합니다. 이 문서에서는 AMP 페이지에서 Google 태그 관리자를 설정하는 권장 방법에 대해 설명합니다.
AMP를 위한 태그 관리자를 설치하는 방법은 다음과 같습니다.
AMP 컨테이너 만들기
태그 관리자는 AMP 컨테이너 유형을 특징으로 합니다. 프로젝트에 적용할 새 AMP 컨테이너를 만듭니다.
- 계정 화면에서 사용하려는 계정에 대한 추가 작업(
)을 클릭합니다. 컨테이너 만들기를 선택합니다.
- 컨테이너 이름을 지정합니다. 설명이 포함된 이름(예: 'example.com - news - AMP')을 사용합니다.
- 컨테이너 사용 위치에서 AMP를 선택합니다.
- 만들기를 클릭합니다.
)을 클릭합니다. 컨테이너 만들기를 선택합니다.이제 컨테이너를 사용할 준비가 되었습니다. 다음 단계는 AMP 페이지에 태그 관리자 코드를 설치하는 것입니다.
태그 관리자는 코드 스니펫을 설치하는 최적의 방법에 대한 정보를 제공합니다. 추가 안내는 다음 섹션을 참조하세요.
태그 관리자 스니펫 추가
새 AMP 컨테이너를 만들면 Google 태그 관리자 설치 화면이 표시됩니다. 태그 관리자는 두 개의 코드 스니펫을 제공합니다. AMP 페이지에 표시되도록 이러한 코드 스니펫을 복사하세요.
첫 번째 스니펫은 amp-analytics 구성요소를 AMP 페이지에 추가합니다. 이 코드는 <head> 섹션의 끝에 삽입되고 페이지에 한 번만 표시되어야 합니다.
두 번째 스니펫은 태그 관리자를 사용하도록 amp-analytics를 구성합니다. 이 코드를 여는 태그인 <body> 바로 뒤에 삽입하세요. GTM-CONTAINER_ID를 태그 관리자의 컨테이너 ID와 교체하거나 태그 관리자 사용자 인터페이스에서 전체 스니펫을 복사하여 붙여넣으세요.
<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>
컨테이너 구성 및 게시
페이지에 컨테이너 스니펫이 올바르게 설치되면 태그 관리자에서 배포된 태그를 실행할 수 있습니다. 다음 단계는 태그 구성을 만들고 컨테이너를 게시하는 것입니다.
새 태그를 만드는 방법은 다음과 같습니다.
- 태그
새로 만들기를 클릭합니다.
- 태그 구성을 클릭하고 지원되는 AMP 태그 목록에서 태그 유형을 선택합니다.
- 태그 공급업체가 제공한 정보를 사용하여 태그를 구성합니다.
- 트리거를 클릭하고 태그를 실행할 하나 이상의 이벤트 컨테이너를 추가합니다.
- 트리거의 이름을 지정하고 저장을 클릭합니다.
새로 만들기를 클릭합니다.추가 태그 구성에 대해 이 단계를 반복합니다. 컨테이너 구성이 준비되면 컨테이너를 게시하여 변경사항을 적용합니다.
페이지 변수
태그 관리자는 AMP 변수를 캡처하여 태그 및 트리거 구성에서 사용할 수 있습니다. 예를 들어 신발을 판매하는 페이지에는 특정 신발의 속성을 설명하는 변수가 있을 수 있습니다. 이러한 값을 사용하여 태그 관리자 변수를 만들 수 있습니다.
<script type="application/json ">
{
"vars" : {
"type": "shoes",
"color": "red"
}
}
</script>
</amp-analytics>
위의 코드에서 색상 변수를 캡처하는 태그 관리자에서 사용자 정의 변수를 만드는 방법은 다음과 같습니다.
- 변수를 클릭합니다.
- 사용자 정의 변수 아래에 있는 새로 만들기를 클릭합니다.
- 변수 구성을 클릭하고 AMP 변수를 선택합니다.
- AMP 변수 이름 필드에 필드 이름(예: 'color')을 입력합니다.
- 변수에 설명이 포함된 이름(예: 'AMP Variable - color')을 지정합니다.
- 저장을 클릭합니다.