Google Ads 방문 페이지에 AMP 사용
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
방문 페이지 속도가 빠르면 일반적으로 전환이 증가하며 AMP는 더 빠르게 로드되는 매력적인 Google Ads 방문 페이지를 만드는 데 매우 유용합니다. amp.dev는 웹 개발자에게 매력적이고 실적이 우수한 페이지를 만드는 데 필요한 리소스를 제공합니다.
이 단계별 가이드에서는 AMP 페이지에서 Google Ads 및 기타 광고 기술을 사용하는 방법을 설명합니다.
1단계: AMP 페이지 만들기 및 검사
AMP 페이지 만들기
기본 AMP 페이지를 만드는 방법을 알아보려면 AMP 프로젝트의 첫 AMP 페이지 만들기 튜토리얼부터 시작하세요. 단계별 실습 안내는 HTML을 AMP로 변환 및 고급 AMP 기능 추가 튜토리얼을 참고하세요. AMP 웹사이트 예 및 AMP 템플릿에서 AMP 구성요소의 샘플 코드와 템플릿을 확인할 수 있습니다.
아래 목록에서는 AMP 페이지에 사용되는 일부 구성요소를 설명합니다. 참고를 위해 구성요소의 전체 목록을 참고하세요.
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는 amp-analytics 구성요소를 사용하여 웹사이트 성능 추적 솔루션을 구현하는 두 가지 방법(iframe(adobeanalytics_nativeConfig) 및 iframe이 아닌(adobeanalytics) 구현)을 제공합니다. 각 접근 방식의 장단점과 구현 세부정보를 알아보세요.
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일이 걸릴 수 있습니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-08-21(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-08-21(UTC)"],[[["\u003cp\u003eFaster landing pages typically lead to more conversions and AMP is a great way to create attractive, fast-loading Google Ads landing pages.\u003c/p\u003e\n"],["\u003cp\u003eThis guide provides step-by-step instructions on how to create, validate, and implement AMP pages for advertising purposes, including conversion tracking and analytics.\u003c/p\u003e\n"],["\u003cp\u003eSeveral AMP components are highlighted, such as amp-bind, amp-form, amp-list, and amp-carousel, offering interactive and dynamic features for landing pages.\u003c/p\u003e\n"],["\u003cp\u003eAMP analytics supports various platforms including Google Ads, Google Analytics, and Google Tag Manager, allowing for comprehensive tracking and measurement of user interactions.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Ads requires explicit input of the AMP page URL for ad serving, and the AMP project encourages contributions and feedback for ongoing improvement.\u003c/p\u003e\n"]]],[],null,["# Using AMP for your Google Ads landing pages\n\n[Faster landing pages](//support.google.com/google-ads/answer/7496737) typically\nlead to more conversions and AMP is a great way to create attractive Google Ads\nlanding pages that load more quickly. [amp.dev](//amp.dev/) provides web\ndevelopers with resources they need to create attractive, high performing pages.\nThis step-by-step guide describes how to use Google Ads and other advertising\ntechnology in your AMP pages.\n\nStep 1: Create and validate AMP pages\n-------------------------------------\n\n### Create AMP pages\n\nTo learn how to create a basic AMP page, start with the AMP Project's [Create\nyour first AMP page](//amp.dev/documentation/guides-and-tutorials/start/create/)\ntutorial. For more hands-on, step-by-step guidance, complete the [Convert HTML\nto AMP](//amp.dev/documentation/guides-and-tutorials/start/converting/) and [Add\nadvanced AMP\nfeatures](//amp.dev/documentation/guides-and-tutorials/start/add_advanced/)\ntutorials. You can find sample code and templates of AMP components at [AMP\nWebsites Examples](//amp.dev/documentation/examples/) and [AMP\nTemplates](//amp.dev/documentation/templates/).\n\nThe list below describes some components used on AMP pages---refer to the\n[complete list](//amp.dev/documentation/components/) of components for\nreference.\n\n- [amp-bind](//amp.dev/documentation/components/amp-bind): Add custom stateful interactivity based on JavaScript-like events.\n- [amp-form](//amp.dev/documentation/components/amp-form): Create landing pages that require input from the user.\n- [amp-list](//amp.dev/documentation/components/amp-list): Fetch content dynamically from a CORS JSON endpoint.\n- [amp-carousel](//amp.dev/documentation/components/amp-carousel): Image carousel for scrolling an image gallery.\n- [amp-lightbox](//amp.dev/documentation/components/amp-lightbox): Display full-screen view of a component when it's been interacted with.\n- [amp-call-tracking](//amp.dev/documentation/components/amp-call-tracking) Dynamically replaces a phone number in a hyperlink for call tracking.\n- [amp-mustache](//amp.dev/documentation/components/amp-mustache): Allows rendering with [Mustache.js](//mustache.github.io/).\n- [amp-date-picker](//amp.dev/documentation/components/amp-date-picker): Provides a widget to select dates. The date picker can render as an overlay relative to input fields, or as a static calendar widget.\n\n### Validate AMP pages\n\nDuring development you'll want to make sure your AMP pages are valid. AMP offers\n[several different\nmethods](//amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp)\nto validate your documents. The most common way to validate an AMP page is by\nusing the [web validator](//validator.ampproject.org/) or the [Google Webmaster\nTools Validator](//search.google.com/test/amp). You can also use the [Chrome\nbrowser\nplugin](//chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc)\nand developer console, or integrate the [amphtml-validator npm\nmodule](//www.npmjs.com/package/amphtml-validator) in your build.\n\nYou can also use [AMPBench](https://github.com/ampproject/ampbench), which is an open\nsource web application and service to validate as well as debug issues around\ndeployment of AMP pages.\n\nFor support with AMP testing, visit the AMP Project's [Getting\nSupport](//www.ampproject.org/support/developer/get_support) page.\n\nStep 2: Set up AMP for conversion tracking and analytics\n--------------------------------------------------------\n\n### Google Ads conversion tracking\n\nUse the\n[amp-analytics](//amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/)\ncomponent to track Google Ads conversions. Follow the steps in [Set up Google Ads\nconversion measurement for AMP landing\npages](/google-ads/amp/conversion-measurement) to learn how to set this up.\n\n### Google Analytics\n\n[Google Analytics](/analytics/devguides/collection/amp-analytics) is one of the\nsupported analytics solutions by\n[amp-analytics](//amp.dev/documentation/components/amp-analytics). To enable\nsessions to be unified across AMP and non-AMP pages, follow the steps in [Set up\nGoogle Analytics session unification for\nAMP](//support.google.com/analytics/answer/7486764).\n\n### Google Tag Manager\n\nThe [amp-analytics](/analytics/devguides/collection/amp-analytics)\ncomponent has built-in support for [Google Tag\nManager](//support.google.com/tagmanager/answer/6103696). In addition to Google\nAds conversions, you can use Google Tag Manager to add remarketing,\nDoubleClick Floodlight, Google Universal Analytics, and similar measurement\nproducts. Refer to the [full list of compatible\ntags](//support.google.com/tagmanager/answer/6106924).\n\n### Adobe Analytics (formerly known as Omniture)\n\nAdobe Analytics offers two methods for implementing their website performance\ntracking solution with\n[amp-analytics](//amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/)\ncomponent: iframe (`adobeanalytics_nativeConfig`) and non-iframe\n(`adobeanalytics`) implementation. Read about the pros/cons and implementation\ndetails of each\n[approach](//marketing.adobe.com/resources/help/en_US/sc/implement/accelerated-mobile-pages.html).\n\n### Integrating other common Google Ads-related technologies\n\nYou can use the\n[amp-analytics](//amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/)\ncomponent to track user actions and events. AMP analytics comes with native\nsupport from over 40 analytics vendors. The framework is flexible and allows you\nto measure and trigger URLs using [custom\nconfigurations](//amp.dev/documentation/components/amp-analytics#specifying-configuration-data)\nto send analytics information to your own servers or to vendors where native AMP\nsupport isn't available. If you're using a technology that isn't currently\nsupported, [ask your vendor to add\nsupport](//amp.dev/documentation/guides-and-tutorials/contribute/integrate-your-analytics-tools).\n\nAMP analytics also allows for flexible variable substitution; for details, refer\nto the [variable\nsubstitution](//amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics_basics)\ndocumentation.\n\nStep 3: Enable AMP serving in the Google Ads UI\n-----------------------------------------------\n\nWhile AMP pages in Google Search are\n[auto-discovered](//support.google.com/webmasters/answer/6340290) via the [link\nfrom your\npages](//amp.dev/documentation/guides-and-tutorials/optimize-and-measure/discovery),\nadvertisers must\nexplicitly input the AMP page URL in Google Ads. Read [How to Use AMP with Google\nAds](//support.google.com/google-ads/answer/7495018) for details on\nsetting up AMP URLs in Google Ads UI.\n\n[Cache\nserving](//amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached)\nis currently available for text ads on Google search results pages served on\nmost major browsers including Android Chrome, Android Google Search App, and\nMobile Safari. We are rolling out more coverage throughout the coming months.\n\nIf you'd like to test how an AMP page appears when delivered from the Google AMP\ncache inside the Google Search Viewer, input your AMP article in the [Search AMP\ntest tool](//search.google.com/test/amp) and click **Preview link**.\n\nAlso, if you'd like to drive Google Ads traffic to your AMP landing page but\ndon't want them to appear in organic search results, add Disallow directives for\nthe relevant AMP pages to your `robots.txt` as you would for any regular web\npage.\n\n### Updating AMP content on landing pages\n\nWhen a user requests an AMP document from the Google AMP Cache, the cache\nautomatically requests updates in order to be able to serve fresh content for\nthe next user once the content has been cached. With this model, updates to AMP\ndocuments propagate automatically and quickly; few users will notice the\nnon-updated version after your update. Additionally, if needed, the\n[update-cache API](/amp/cache/update-cache) can be used to update or remove\ncontent from the AMP cache.\n\nThe AMP project is adding new functionality and components every day. If you\nfind functionality that's missing, you can\n[contribute](https://github.com/ampproject/amphtml/blob/master/README.md) or request\nit to be added by opening a [GitHub\nissue](//amp.dev/documentation/guides-and-tutorials/contribute/).\n\n### Invalid AMP page handling\n\nWhen a page turns invalid, the AMP Cache would discover that within the span of\na few requests and start redirecting to the AMP page served origin. It can take\n1 to 2 days to revert to AMP cache serving."]]
