06/03/2026

★★★★★Rating: 4.42 (15633 votes)

Forstå AMP Codelab: En Dybdegående Guide

Accelerated Mobile Pages (AMP) revolutionerer den mobile weboplevelse ved at levere lynhurtige og effektive sider. Dette codelab, "AMP Codelab: Avancerede funktioner og komponenter", bygger videre på de grundlæggende principper fra "Accelerated Mobile Pages Foundations". Hvis du allerede har en forståelse for de basale AMP-koncepter, er du klar til at tage dine færdigheder til næste niveau. Her vil vi udforske, hvordan AMP håndterer alt fra annoncering og statistikker til integration af video, sociale medier, billedkarruseller og meget mere. Ved at arbejde videre med et eksisterende AMP-grundlag vil vi tilføje disse avancerede funktioner ved hjælp af AMP's kraftfulde komponenter.

What is AMP Codelab? — This codelab is a continuation of the concepts introduced in the Accelerated Mobile Pages Foundations. You should already have completed the previous AMP code lab or at least have a basic understanding of AMP's core concepts before starting this lab.

Indholdsfortegnelse

Hvad Du Vil Lære

Dette codelab er designet til at give dig praktisk erfaring med en række centrale AMP-funktioner:

Implementering af grafiske annoncer med komponenten amp-ad.
Integration af videoer fra YouTube, Twitter-kort og tilpasningsdygtige tekstelementer.
Konstruktion af karruseller med billeder og blandet indhold ved brug af amp-carousel.
Opsætning af simple sporingsmønstre med amp-analytics.
Strategier til at tilføje site-navigation til dine AMP-sider.
Forståelse for, hvordan skrifttyper fungerer effektivt i AMP-miljøer.

Krav og Opsætning

For at få mest muligt ud af dette codelab, skal du have følgende klar:

Koden fra codelab'et: Denne kan downloades som en ZIP-fil eller klones fra GitHub-repository'et: git clone https://github.com/googlecodelabs/accelerated-mobile-pages-advanced.git. Sørg for at udpakke filerne og navigere til mappen via kommandolinjen.
Chrome Browser: Eller en lignende browser, der tillader inspektion af JavaScript-konsollen.
Python 2.7 eller en lignende webserver: Vi vil bruge en lokal webserver til at teste dine sider.
Kodeeditor: F.eks. Atom, Sublime Text eller Notepad++.

Test Din AMP-side

For at kunne teste dine AMP-sider er det nødvendigt at køre dem fra en webserver. Her er tre anbefalede metoder:

Mulighed 1: Web Server for Chrome

Dette er den mest ligetil og platformsuafhængige løsning. Installer "Web Server for Chrome" fra Chrome Web Store. Når appen er installeret, skal du vælge den mappe, hvor du har udpakket codelab-filerne. Sørg for at markere "Show index.html automatically" og sæt porten til 8000. Genstart derefter serveren. Du kan tilgå din side via: http://localhost:8000/article.amp.html.

Mulighed 2: Firebase Hosting

Firebase Hosting tilbyder en robust platform til statisk hosting, der er ideel til AMP-projekter. SSL er aktiveret som standard. Følg instruktionerne på Firebase's hjemmeside for at implementere din AMP-side.

Mulighed 3: Python Lokal HTTP Server

Hvis du foretrækker at arbejde fra kommandolinjen, kan du starte en lokal webserver med Python. Naviger til din projektmappe i terminalen og kør kommandoen: python -m SimpleHTTPServer. Din side vil derefter være tilgængelig på: http://localhost:8000/article.amp.html.

Grundlæggende AMP Komponenter

AMP's komponentbaserede system muliggør hurtig udvikling af responsive og effektive funktioner. Kernen af AMP JavaScript-biblioteket, inkluderet i <head>-sektionen, indeholder flere essentielle komponenter:

amp-ad: Bruges til at vise annoncer.
amp-img: En forbedret erstatning for standard HTML <img>-tagget.
amp-pixel: Designet til sporingsformål, f.eks. til at tælle sidevisninger.
amp-video: En erstatning for HTML5 <video>-tagget.

Disse kernekomponenter er umiddelbart tilgængelige. I dette codelab vil vi fokusere på amp-ad, da amp-img allerede er dækket i grundlæggende AMP.

Tilføjelse af Annoncer med amp-ad

Lad os integrere annoncer i din article.amp.html-side. Alle AMP-annoncer oprettes ved hjælp af amp-ad-komponenten. Denne komponent giver fleksibilitet til at konfigurere annoncer med specifikke bredder, højder og layout-tilstande. Mange annonceplatforme kræver yderligere konfiguration, såsom konto-ID'er eller specifikke annonceindstillinger. Disse indstillinger overføres som HTML-attributter.

Eksempel på DoubleClick Annonce

Her er et simpelt eksempel på en DoubleClick-annonce:

<amp-ad width="300" height="250" type="doubleclick" data-slot="/35096353/amptesting/image/static"> </amp-ad>

Bemærk type-attributten, der specificerer annonceplatformen (i dette tilfælde "doubleclick"). data-slot er leverandørspecifik og kan variere.

Eksempel på A9 Annonce

Her er et eksempel på en annonce fra A9-platformen:

<amp-ad width="300" height="250" type="a9" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302"> </amp-ad>

Tilføj begge disse eksempler til din side lige efter <header>-tagget. Du kan opleve fejl i udviklerkonsollen, såsom "Mixed content" eller "XMLHttpRequest cannot load". "Mixed content" kan opstå, hvis ikke alt indhold er HTTPS-sikret, hvilket er et krav for annoncer i AMP.

Geografisk Målrettede Annoncer

AMP understøtter også geografisk målretning. Prøv at tilføje følgende to annoncer:

<amp-ad width="300" height="250" type="doubleclick" data-slot="/35096353/amptesting/geo/uk"> <div fallback>Ingen annonce blev vist, da du ikke browser fra UK!</div> </amp-ad> <amp-ad width="300" height="250" type="doubleclick" data-slot="/35096353/amptesting/geo/us"> <div fallback>Ingen annonce blev vist, da du ikke browser fra US!</div> </amp-ad>

Disse annoncer er konfigureret til kun at blive vist i henholdsvis Storbritannien og USA. Hvis du besøger siden fra et andet land, vil annoncerne ikke blive vist, og fallback-indholdet vil blive vist i stedet. Fallback-elementer vises, hvis det overordnede element ikke indlæses korrekt.

Understøttede Annonceplatforme

AMP understøtter en lang række annonceplatforme, herunder:

Platform
A9
Adblade
Adform
AdReactor
AdSense
AdTech
Criteo
Media.net
DoubleClick
Flite
Google Ad Manager
OpenX
PulsePoint
Smart AdServer
Yieldmo
Revcontent
TripleLift
Adzerk
I-Mobile
Webedia

Det er vigtigt at bemærke, at al annonce-JavaScript kører inden for en sandkasse (iframe) for at sikre AMP's ydeevne og sikkerhed.

Udvidede Komponenter: Video, Tweets og Mere

Moderne webartikler indeholder ofte mere end blot tekst og billeder. AMP tilbyder udvidede komponenter til at inkludere avancerede funktioner.

Integration af YouTube Videoer

For at indlejre en YouTube-video, skal du først inkludere den relevante JavaScript-forespørgsel i din <head>:

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Derefter kan du bruge amp-youtube-komponenten:

<amp-youtube data-videoid="mGENRKrdoGY" layout="responsive" width="480" height="270"> <div fallback> <p>Videoen kunne ikke indlæses.</p> </div> </amp-youtube>

layout="responsive" sikrer, at videoen tilpasser sig bredden på dens container. Fallback-elementet vises, hvis videoen af en eller anden grund ikke kan indlæses.

Indlejring af Tweets

For at vise tweets skal du inkludere amp-twitter-komponenten:

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

Og derefter tweetet:

<amp-twitter width="486" height="657" layout="responsive" data-tweetid="638793490521001985"></amp-twitter>

data-tweetid identificerer det specifikke tweet, der skal vises.

Fremhævning af Citater med amp-fit-text

amp-fit-text-komponenten er ideel til at fremhæve vigtige citater. Den justerer automatisk skriftstørrelsen for at passe teksten inden for definerede dimensioner.

Først, tilføj JavaScript-biblioteket:

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

Og derefter selve komponenten:

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42"> Stort, fedt citat fra artiklen her. </amp-fit-text>

Eksperimenter med forskellige tekstlængder og dimensioner for at se, hvordan amp-fit-text reagerer.

Komplekse Karruseller

Karruseller er en populær måde at præsentere flere elementer på en pladsbesparende måde. AMP's amp-carousel-komponent er meget alsidig.

Billedkarrusel

Start med at inkludere JavaScript-biblioteket:

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Og opret en simpel billedkarrusel:

<amp-carousel layout="fixed-height" height="168" type="carousel"> <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img> <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img> <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img> </amp-carousel>

Du kan ændre type til slides for en diasshow-lignende oplevelse. Tilføj loop for uendelig gentagelse og autoplay delay="2000" for automatisk afspilning hvert andet sekund.

Blandet Indhold i Karrusel

amp-carousel kan også håndtere en blanding af indholdstyper, herunder annoncer og tekst.

<style amp-custom> amp-fit-text { white-space: normal; } </style> <amp-carousel layout="fixed-height" height="250" type="carousel"> <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img> <amp-ad width="300" height="250" type="doubleclick" data-slot="/35096353/amptesting/image/static"> <div placeholder>Annoncen indlæses...</div> </amp-ad> <amp-fit-text width="300" height="250" layout="fixed"> Stort, fedt citat fra artiklen her. </amp-fit-text> </amp-carousel>

Bemærk brugen af placeholder-attributten i amp-ad, som viser indhold, mens annoncen indlæses, i modsætning til fallback, der vises, hvis annoncen fejler.

Sporing med amp-analytics

amp-analytics-komponenten giver en fleksibel måde at integrere webstatistikker på.

Inkluder først biblioteket:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Og konfigurer derefter sporingen i JSON-format:

<amp-analytics type="googleanalytics"> <script type="application/json"> { "vars": { "account": "UA-YYYY-Y" }, "triggers": { "default pageview": { "on": "visible", "request": "pageview", "vars": { "title": "Artikel Navn" } } } } </script> </amp-analytics>

Du kan definere flere triggere baseret på brugerinteraktioner. For eksempel, for at spore klik på et element med ID'et "header":

<amp-analytics type="googleanalytics"> <script type="application/json"> { "vars": { "account": "UA-YYYY-Y" }, "triggers": { "default pageview": { "on": "visible", "request": "pageview", "vars": { "title": "Artikel Navn" } }, "click on #header trigger": { "on": "click", "selector": "#header", "request": "event", "vars": { "eventCategory": "examples", "eventAction": "clicked-header" } } } } </script> </amp-analytics>

Erstat UA-YYYY-Y med dit faktiske Google Analytics-sporings-ID.

Navigation på Din Side

Effektiv navigation er afgørende for brugeroplevelsen.

Simpel Hjem-link

Tilføj et simpelt link til din hjemmeside:

<header> <a href="homepage.html"> <amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img> </a> Nyhedssite </header> <style amp-custom> .home-button { float: left; } </style>

Under-menu Karrusel

For at skabe en kompakt navigationsmenu, kan du bruge amp-carousel:

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> <div class="sub-menu"> <amp-carousel layout="fixed-height" height="38" type="carousel"> <a href="#example1">Eksempel 1</a> <a href="#example2">Eksempel 2</a> <a href="#example3">Længere Navn Eksempel 3</a> <a href="#example4">Eksempel 4</a> <a href="#example5">Eksempel 5</a> <a href="#example6">Eksempel 6</a> </amp-carousel> </div> <style amp-custom> .sub-menu { background: black; } .sub-menu a { display: block; background: tomato; margin: 5px; padding: 5px; color: white; text-decoration: none; } </style>

Dette giver en scrollbar menu under sidens header, der kan rumme mange links uden at optage for meget plads.

Konklusion

Ved at gennemføre dette codelab har du nu en solid forståelse for, hvordan du implementerer avancerede funktioner i dine AMP-sider. Fra dynamisk indhold som videoer og tweets til optimeret annoncering og brugervenlig navigation, er AMP et kraftfuldt værktøj til at skabe exceptionelle mobile weboplevelser. Fortsæt med at eksperimentere med de forskellige komponenter og muligheder for at finpudse dine AMP-projekter.

Hvis du vil læse andre artikler, der ligner Mestrer AMP: Avancerede funktioner og komponenter, kan du besøge kategorien Teknologi.