방문 페이지 속도가 빠르면 일반적으로 전환이 증가하며 AMP는 더 빠르게 로드되는 매력적인 Google Ads 방문 페이지를 만드는 데 매우 유용합니다. amp.dev는 웹 개발자에게 매력적이고 실적이 우수한 페이지를 만드는 데 필요한 리소스를 제공합니다. 이 단계별 가이드에서는 AMP 페이지에서 Google Ads 및 기타 광고 기술을 사용하는 방법을 설명합니다.
1단계: AMP 페이지 만들기 및 검사
AMP 페이지 만들기
기본 AMP 페이지를 만드는 방법을 알아보려면 AMP 프로젝트의 첫 AMP 페이지 만들기 튜토리얼부터 시작하세요. 단계별 실습 안내는 HTML을 AMP로 변환 및 고급 AMP 기능 추가 튜토리얼을 참고하세요. AMP 웹사이트 예 및 AMP 템플릿에서 AMP 구성요소의 샘플 코드와 템플릿을 확인할 수 있습니다.
아래 목록에서는 AMP 페이지에 사용되는 일부 구성요소를 설명합니다. 참고를 위해 구성요소의 전체 목록을 참고하세요.
- amp-bind: JavaScript와 같은 이벤트를 기반으로 맞춤 상태 저장 상호작용을 추가합니다.
- amp-form: 사용자의 입력이 필요한 방문 페이지를 만듭니다.
- amp-list: CORS JSON 엔드포인트에서 동적으로 콘텐츠를 가져옵니다.
- amp-carousel: 이미지 갤러리를 스크롤하는 이미지 캐러셀입니다.
- amp-lightbox: 상호작용이 있을 때 구성요소의 전체 화면 뷰를 표시합니다.
- amp-call-tracking: 통화 추적을 위해 하이퍼링크의 전화번호를 동적으로 대체합니다.
- amp-mustache: Mustache.js로 렌더링을 허용합니다.
- amp-date-picker: 날짜를 선택하는 위젯을 제공합니다. 날짜 선택 도구는 입력란을 기준으로 오버레이로 렌더링되거나 정적 캘린더 위젯으로 렌더링될 수 있습니다.
AMP 페이지 유효성 검사
개발 중에는 AMP 페이지의 유효성을 확인해야 합니다. AMP는 문서의 유효성을 검사하는 여러 가지 방법을 제공합니다. AMP 페이지의 유효성을 검사하는 가장 일반적인 방법은 웹 유효성 검사 도구 또는 Google 웹마스터 도구 유효성 검사 도구를 사용하는 것입니다. Chrome 브라우저 플러그인 및 개발자 콘솔을 사용하거나 빌드에 amphtml-validator npm 모듈을 통합할 수도 있습니다.
오픈소스 웹 애플리케이션 및 서비스인 AMPBench를 사용하여 AMP 페이지 배포와 관련된 문제를 검사하고 디버그할 수도 있습니다.
AMP 테스트와 관련된 지원은 AMP 프로젝트의 지원 받기 페이지를 참고하세요.
2단계: 전환 추적 및 분석을 위한 AMP 설정
Google Ads 전환 추적
amp-analytics 구성요소를 사용하여 Google Ads 전환을 추적합니다. AMP 방문 페이지의 Google Ads 전환 측정 설정의 단계에 따라 설정 방법을 알아보세요.
Google 애널리틱스
Google 애널리틱스는 amp-analytics에서 지원하는 애널리틱스 솔루션 중 하나입니다. AMP 페이지와 AMP가 아닌 페이지에서 세션을 통합하려면 AMP용 Google 애널리틱스 세션 통합 설정의 단계를 따르세요.
Google 태그 관리자
amp-analytics 구성요소에는 Google 태그 관리자에 대한 기본 제공 지원이 있습니다. Google Ads 전환 외에도 Google 태그 관리자를 사용하여 리마케팅, DoubleClick 플러드라이트, Google 유니버설 애널리틱스, 유사한 측정 제품을 추가할 수 있습니다. 호환되는 태그 전체 목록을 참고하세요.
Adobe Analytics (이전 명칭: Omniture)
Adobe Analytics는 amp-analytics 구성요소를 사용하여 웹사이트 성능 추적 솔루션을 구현하는 두 가지 방법(iframe(adobeanalytics_nativeConfig) 및 iframe이 아닌(adobeanalytics) 구현)을 제공합니다. 각 접근 방식의 장단점과 구현 세부정보를 알아보세요.
다른 일반적인 Google Ads 관련 기술 통합
amp-analytics 구성요소를 사용하여 사용자 액션과 이벤트를 추적할 수 있습니다. AMP 애널리틱스에는 40개가 넘는 애널리틱스 공급업체의 네이티브 지원이 제공됩니다. 이 프레임워크는 유연하며 맞춤 구성을 사용하여 URL을 측정하고 트리거하여 자체 서버 또는 네이티브 AMP 지원을 사용할 수 없는 공급업체로 분석 정보를 전송할 수 있습니다. 현재 지원되지 않는 기술을 사용하는 경우 공급업체에 지원을 요청하세요.
AMP 분석을 사용하면 유연한 변수 대체도 가능합니다. 자세한 내용은 변수 대체 문서를 참고하세요.
3단계: Google Ads UI에서 AMP 게재 사용 설정
Google 검색의 AMP 페이지는 페이지의 링크를 통해 자동으로 검색되지만 광고주는 Google Ads에 AMP 페이지 URL을 명시적으로 입력해야 합니다. Google Ads UI에서 AMP URL을 설정하는 방법에 관한 자세한 내용은 Google Ads에서 AMP를 사용하는 방법을 참고하세요.
캐시 제공은 현재 Android Chrome, Android Google 검색 앱, 모바일 Safari를 비롯한 대부분의 주요 브라우저에서 게재되는 Google 검색 결과 페이지의 텍스트 광고에 사용할 수 있습니다. 앞으로 몇 개월에 걸쳐 서비스 확장해 나갈 예정입니다.
Google 검색 뷰어 내의 Google AMP 캐시에서 전송될 때 AMP 페이지가 어떻게 표시되는지 테스트하려면 Google AMP 검색 테스트 도구에 AMP 기사를 입력하고 미리보기 링크를 클릭합니다.
또한 Google Ads 트래픽을 AMP 방문 페이지로 유도하고 싶지만 자연 검색 결과에 표시되지 않도록 하려면 일반 웹페이지와 마찬가지로 관련 AMP 페이지에 대한 Disallow 지시어를 robots.txt에 추가합니다.
방문 페이지의 AMP 콘텐츠 업데이트
사용자가 Google AMP Cache에서 AMP 문서를 요청하면 콘텐츠가 캐시된 후 다음 사용자에게 최신 콘텐츠를 제공할 수 있도록 캐시에서 자동으로 업데이트를 요청합니다. 이 모델을 사용하면 AMP 문서의 업데이트가 자동으로 빠르게 전파되므로 업데이트 후 업데이트되지 않은 버전을 발견하는 사용자는 거의 없습니다. 또한 필요한 경우 update-cache API를 사용하여 AMP 캐시에서 콘텐츠를 업데이트하거나 삭제할 수 있습니다.
AMP 프로젝트는 매일 새로운 기능과 구성요소를 추가하고 있습니다. 누락된 기능을 발견하면 GitHub 이슈를 열어 참여하거나 추가를 요청할 수 있습니다.
잘못된 AMP 페이지 처리
페이지가 잘못되면 AMP Cache는 몇 번의 요청 내에 이를 감지하고 AMP 페이지가 게재된 출처로 리디렉션을 시작합니다. AMP 캐시 게재로 되돌아가는 데 1~2일이 걸릴 수 있습니다.