Intro to AMPHTML ads - amp.dev

AMPHTML ads are a faster, lighter and more secure way to advertise on the web. Although AMP pages support traditional HTML ads, these ads can be slow to ... AboutAMPWebsitesWebStoriesAMPAdsAMPEmailPageExperienceHowAMPworksVision&MissionUsecasesSuccessStories DocumentationGetStartedGuides&TutorialsComponentsExamplesCoursesTemplatesTools CommunityContributeRoadmapGovernanceWorkingGroups EventsAMPFest2020AMPRoadshow Blog Help Search{{^prevUrl}}{{#result.components.length}}{{#initial}}ImportantComponents{{/initial}}{{^initial}}Components{{/initial}}{{/result.components.length}}{{/prevUrl}}{{#result.components}}{{#initial}}{{/initial}}{{^initial}}{{title}}{{/initial}}{{description}}{{#exampleUrl}}Openexample{{#playgroundUrl}}Openinplayground{{/playgroundUrl}}{{/exampleUrl}}{{/result.components}}{{^prevUrl}}{{#result.pages.length}}{{#initial}}PopularArticles{{/initial}}{{^initial}}Results{{/initial}}{{/result.pages.length}}{{/prevUrl}}{{#result.pages}}{{title}}{{description}}{{/result.pages}}{{#result.isTruncated}}Althoughthereare{{result.totalResults}}hitsintotalwecannotshowmorethan100.{{/result.isTruncated}}LoadmoreSomethingwentwrongwhiletryingtoloadmoresearchresults.Weapologizefortheinconveniencecaused.Pleasetryagainlater.;(Somethingwentwrong……whiletryingtoloadthesearchresults.Weapologizefortheinconveniencecaused.Pleasetryagainlater.¯\_(ツ)_/¯Noresultsfound.Wecouldnotfindanyresultsmatchingyoursearchquery. Selectyourformatforamorestreamlinedexperience TableofcontentsWhat'sanAMPHTMLad? Benefits Formats HowAMPHTMLadswork ServingAMPHTMLads Publishers Creativeagencies Adnetworks/servers CreatingAMPHTMLads ValidateAMPHTMLadsyntax SupportingAMPHTMLadsinRTB FAQs ArethereanyAMPHTMLadsamples? DoAMPHTMLadssupport3rdpartyverificationandviewabilitydetection? DoAMPHTMLadssupporttimeline-basedanimation? Mostadshavetappabletargetsandconfigurableadexits.DoAMPHTMLadshaveasimilarmechanism? Ican'tfindwhatIneed,wherecanIaskquestions? ToggleSidebar ToggleSidebar DocumentationGuides&TutorialsIntrotoAMPHTMLadsWhat'sanAMPHTMLad? AMPHTMLadsareafaster,lighterandmoresecurewaytoadvertiseontheweb.AlthoughAMPpagessupporttraditionalHTMLads,theseadscanbeslowtoload.TomakeadsthemselvesasfastastherestoftheAMPpage,youcanbuildadsinAMPHTML.AMPHTMLadsareonlydeliveredafterbeingvalidated,ensuringthattheadsaresecureandperformant.Mostofall,theseadscanbedeliveredanywhereontheweb,notjustonAMPpages. AMPHTMLadsarewritteninAMPHTMLaccordingtotheAMPHTMLadspec(avariantofAMPHTML+CSS).ThismeansthatadsnolongerhavetheabilitytorunarbitraryJavaScript,whichistraditionallythenumberonecauseofpooradperformance.Therefore,justlikecoreAMP,thecoreadsJavaScriptuse-casesarebuiltrightintotheAMPOpenSourceprojectwhichguaranteesgoodbehaviorfromads. Benefits WhyareAMPHTMLadsbetterthantraditionalads? Faster:AMPHTMLadsarefasterbecausetheadsarerequestedearlierinthepagerenderingprocess,andimmediatelydisplayedjustbeforetheuserisabouttoviewthead.ThereducedfilesizeofAMPHTMLadsalsoincreasesspeed. Lighter:AMPHTMLadscombinecommonlyusedadfunctionality,whichreducesthead'sfilesize.Onceonthepage,AMPHTMLadsalsoconsumelessresources.Forexample,insteadof10trackersrequestingtheirowninformationinregularads,AMPHTMLadscollectallthedataonceanddistributeittoanynumberofinterestedtrackers. Coordinated:OnAMPpages,theAMPruntimecancoordinateamobilephone'slimitedresourcestotherightcomponentattherighttimetogivethebestuserexperience.Forexample,AMPHTMLadswithanimationsarepausedwhentheadsarenotinthecurrentviewport. MoreEngaging:Userscan'tengagewithadstheycan'tsee.Fasteradsleadtohigherviewabilityandthereforehigherclick-throughrates,whichultimatelyleadstobetteradperformance. SafefromMalware:It'simpossibletospreadmalwarewithAMPHTMLadsbecausetheadsareverifiedbeforebeingserved.Becauseofthis,advertiserscanensureasafeuserexperienceandpositivebrandperception. MoreFlexible:AMPHTMLadsaredesignedtoworkonbothAMPandnon-AMPwebpages,aswellasacrossanydevice. Formats AMPHTMLadsareflexibleanddynamic,allowingformanycreativeformatslikecarousel,parallax,andlightbox,tonameafew.Getstartedbyleveragingtheopen-sourceAMPHTMLadtemplatesonExamples. CarouselVideoParallaxLightbox HowAMPHTMLadswork ServingAMPHTMLadstoAMPpages PublishersinsertanadslotontheirAMPpageviatheamp-adtag,specifyingtheadnetworktheywishtouse. TheAMPRuntimesendsanadrequesttothespecifiedadnetworktoretrievethead.AdnetworkscapableofservingAMPHTMLadsprovideaFastFetchimplementationthatvalidatesandsignsthecreative. TheadnetworkrespondswiththeAMPHTMLadandtheAMPRuntimerenderstheadontheAMPpage. NospecialintegrationisneededtoserveAMPHTMLadstonon-AMPpages.CheckwithyouradnetworktoseeiftheysupportAMPHTMLads. ServingAMPHTMLads Publishers Toserveyourdirect-soldadformatsinAMPHTML,youmustcreatetheadsaccordingtotheAMPHTMLadspecanddeliverthemusinganadserverthatsupportsAMPHTMLadserving.Currently,thefollowingadserverssupportAMPHTMLads: DoubleClickforPublishers TripleLift Dianomi Adzerk GoogleAdSense TodeliverAMPHTMLadsthroughyourindirectchannels(e.g.,exchange,SSP,etc.),useasupportingadnetwork/adserveronthefollowinglist. Creativeagencies Ifyouareacreativeagency,youmustcreatetheadsinaccordancewiththeAMPHTMLadspec.Forinspirationandexamples,seetheopen-sourceAMPHTMLadtemplatesonExamples.Alternatively,useoneofthefollowingtoolstocreateAMPHTMLads: Celtra'sAdCreator GoogleWebDesigner AdobeAnimate(comingsoon) Adnetworks/servers TodeliverAMPHTMLadstoAMPpages,youneedtocreateanamp-adextensionforyournetwork(unlessyoualreadyhaveone)whichusestheFastFetchadrequestimplementation.RefertoIntegratingwithAMPtoservedisplayadsfordetails.KeepinmindthatnospecialintegrationisneededtoserveAMPHTMLtonon-AMPpages. CreatingAMPHTMLads Fromscratch:AMPHTMLadsmustfollowtheAMPHTMLadspec.Fordemosandexamples,seetheopen-sourceAMPHTMLadtemplatesonExamples. Usingtools:YoucanuseanyofthefollowingtoolstobuildAMPHTMLcreatives: Celtra'sAdCreator GoogleWebDesigner AdobeAnimate(comingsoon) ValidateAMPHTMLadsyntax AftercreatingyourAMPHTMLad,youshouldmakesurethattheadisusingthecorrectAMPHTMLsyntax.Dependingonyourdevelopmentenvironment,thereareafewoptionsforyoutovalidateyourAMPHTMLads: UsetheAMPvalidatorNPMmoduletointegratevalidationintoyourbuildCI. UsetheAMPvalidatorforone-offtesting. PartnerwithCloudflareandusetheirpublicvalidatorendpoint. NOTE–TorenderAMPHTMLadsquicklyonAMPpages(i.e.,usingpreferentialrenderinginFastFetch),thesyntaxmustbecorrect.Ifthesyntaxisn'tvalid,theadwillstillrender,justnotasquickly. SupportingAMPHTMLadsinRTB ForSSPsandadexchangesthatwanttosupportAMPHTMLadsinaReal-TimeBidding(RTB)environment,refertotheImplementationGuideforRTBAdExchangesfordetails. FAQs ArethereanyAMPHTMLadsamples? Yes.AnumberofgreatlookingAMPHTMLadtemplatescanbefoundonExamples.ThesesamplesuseadvancedcomponentsinAMP. DoAMPHTMLadssupport3rdpartyverificationandviewabilitydetection? Yes,thereisnativesupportforverificationandviewabilitydetectionusingamp-analytics(e.g.,Google'sActiveViewintegratesthisway).TherearealsoothervendorslikeMOATthatareactivelyimplementingsupportforit. DoAMPHTMLadssupporttimeline-basedanimation? Yes.Seeamp-animation. Mostadshavetappabletargetsandconfigurableadexits.DoAMPHTMLadshaveasimilarmechanism? Yes.Seeamp-ad-exit. Ican'tfindwhatIneed,wherecanIaskquestions? StackOverflowisourrecommendedwaytofindanswerstoquestionsaboutAMP;sincemembersoftheAMPProjectcommunityregularlymonitorStackOverflowyouwillprobablyreceivethefastestresponsetoyourquestionsthere. JointheSlack#a4a-discusschannelforsolutionsandanswers. IfyouencounterabuginAMPorhaveafeaturerequestforAMP,seeReportingissueswithAMPforinformationonfilinganissue. adswebsitesstoriesemail StartCreateyourfirstAMPHTMLadCreatetheshellfortheadCreateanAMPHTMLadCreatetheimageadTrackadviewsValidateAMPHTMLsyntaxCongratulations!LearnAMPforAdsspecificationActionsandeventsCommonelementattributesIntrotoAMPHTMLadsEnableexperimentalfeaturesAMP'sLayoutSystemAMPHTMLLayoutSystemDemonstratingAMPlayoutsValidationWorkflowValidateAMPpagesAMPvalidationerrorsDevelopStyle&LayoutSupportedCSSLayout&mediaqueriesPlaceholders&fallbacksResponsiveimageswithsrcset,sizes&heightsCreateresponsiveAMPpagesAddcustomfontsIncludemedia,iframes&third-partycontentIncludeimages&videoAnimate&TransitionTriggeringCSSanimations&transitionsIntroductiontocomplexanimationsBestpracticesforcreatingaWebStoryadOptimize&MeasureHowtoconfigurebasicanalyticsforyourAMPpagesContributeHowtocontributeContributedocumentationDocumentationtypesAMPterminologyFormattingguides&tutorialsThirdpartycontributionsIntegrateyouradtechnologiesintoAMPReleaseScheduleContributetranslationsIntegratingwithAMPtoservedisplayads Weusecookiestounderstandhowyouuseoursiteandtoimproveyourexperience.Bycontinuingtouseoursite,youacceptouruseofcookiesandprivacypolicy.Gotit!