일반적으로 방문 페이지 속도가 빨라지면 전환이 늘어나며, AMP는 로드 속도가 더 빠른 매력적인 Google Ads 방문 페이지를 만드는 데 좋은 방법입니다. amp.dev는 웹 개발자가 매력적이고 실적이 우수한 페이지를 만드는 데 필요한 리소스를 제공합니다. 이 단계별 가이드에서는 AMP 페이지에서 Google Ads 및 기타 광고 기술을 사용하는 방법을 설명합니다.
1단계: AMP 페이지 만들기 및 유효성 검사하기
AMP 페이지 만들기
기본 AMP 페이지를 만드는 방법을 알아보려면 AMP 프로젝트의 첫 번째 AMP 페이지 만들기 가이드를 시작하세요. 자세한 단계별 안내는 HTML을 AMP로 변환 및 고급 AMP 기능 추가 가이드를 완료하세요. AMP 웹사이트 예 및 AMP 템플릿에서 AMP 구성요소의 샘플 코드와 템플릿을 찾을 수 있습니다.
아래 목록에서는 AMP 페이지에 사용되는 일부 구성요소를 설명합니다. 구성요소의 전체 목록을 참고하세요.
- amp-bind: 자바스크립트와 유사한 이벤트를 기반으로 맞춤 스테이트풀(Stateful) 상호작용을 추가합니다.
- amp-form: 사용자의 입력이 필요한 방문 페이지를 만듭니다.
- amp-list: CORS JSON 엔드포인트에서 동적으로 콘텐츠를 가져옵니다.
- amp-carousel: 이미지 갤러리를 스크롤하기 위한 이미지 캐러셀입니다.
- amp-라이트박스: 구성요소와 상호작용할 때 전체 화면 뷰를 표시합니다.
- amp-call-tracking 통화 추적을 위해 하이퍼링크의 전화번호를 동적으로 교체합니다.
- amp-mustache: Mustache.js를 사용한 렌더링을 허용합니다.
- amp-date-picker: 날짜를 선택하는 위젯을 제공합니다. 날짜 선택 도구는 입력란을 기준으로 한 오버레이 또는 정적 캘린더 위젯으로 렌더링될 수 있습니다.
AMP 페이지 유효성 검사
개발 중에 AMP 페이지가 유효한지 확인하는 것이 좋습니다. AMP에서는 문서의 유효성을 검사하는 몇 가지 방법을 제공합니다. AMP 페이지의 유효성을 검사하는 가장 일반적인 방법은 웹 검사기 또는 Google 웹마스터 도구 검사기를 사용하는 것입니다. Chrome 브라우저 플러그인 및 개발자 콘솔을 사용하거나 빌드에 amphtml-validate npm 모듈을 통합할 수도 있습니다.
또한 오픈소스 웹 애플리케이션 및 서비스인 AMPBench를 사용하여 AMP 페이지 배포와 관련된 문제를 확인하고 디버그할 수 있습니다.
AMP 테스트와 관련하여 지원을 받으려면 AMP 프로젝트의 지원받기 페이지를 방문하세요.
2단계: 전환 추적 및 분석을 위해 AMP 설정
Google Ads 전환 추적
Google Ads 전환을 추적하려면 amp-analytics 구성요소를 사용하세요. 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 Analytics는 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 페이지가 제공될 때 어떻게 표시되는지 테스트하려면 검색 AMP 테스트 도구에 AMP 문서를 입력하고 링크 미리보기를 클릭합니다.
또한 Google Ads 트래픽을 AMP 방문 페이지로 유도하고 싶지만 자연 검색결과에는 표시되지 않게 하려면 일반 웹페이지에서와 마찬가지로 관련 AMP 페이지의 Disallow 지시어를 robots.txt에 추가합니다.
방문 페이지에서 AMP 콘텐츠 업데이트
사용자가 Google AMP Cache에서 AMP 문서를 요청하면 캐시는 콘텐츠가 캐시된 후 다음 사용자에게 새로운 콘텐츠를 제공할 수 있도록 자동으로 업데이트를 요청합니다. 이 모델을 사용하면 AMP 문서 업데이트가 자동으로 신속하게 전파되므로 업데이트 후 업데이트되지 않은 버전을 확인하는 사용자는 거의 없습니다. 또한 필요한 경우 update-cache API를 사용하여 AMP 캐시에서 콘텐츠를 업데이트하거나 삭제할 수 있습니다.
AMP 프로젝트는 매일 새로운 기능과 구성요소를 추가합니다. 누락된 기능을 발견하면 GitHub 문제를 열어 참여하거나 추가를 요청할 수 있습니다.
잘못된 AMP 페이지 처리
페이지가 유효하지 않게 되면 AMP 캐시가 몇 번의 요청 범위에서 이를 발견하고 AMP 페이지 제공 출처로 리디렉션하기 시작합니다. AMP 캐시 제공으로 되돌리는 데 1~2일이 걸릴 수 있습니다.