Konfigurationsvejledning til AMP og Tag Manager

Projektet Accelerated Mobile Pages (AMP) er en open source-webplatform, der er udviklet med det formål at sikre hurtigere indlæsning af webindhold. AMP understøtter brug af Google Tag Manager. I dette dokument beskrives den anbefalede metode til konfiguration af Google Tag Manager på AMP-sider.

Sådan installerer du Tag Manager til AMP:

Opret en AMP-container i Tag Manager.
Tilføj Tag Manager-kodestykket på dine AMP-sider.
Konfigurer tags i din Tag Manager-container, og offentliggør den.

Opret en AMP-container

I Tag Manager har du mulighed for at oprette en AMP-container. Opret en ny AMP-container til dit projekt:

Klik på Flere handlinger for den konto, du vil bruge, på skærmbilledet Konti. Vælg Opret container.
Navngiv containeren. Brug et beskrivende navn, f.eks. "eksempel.dk – nyheder – AMP".
Vælg AMP under Hvor skal containeren bruges?.
Klik på Opret.

Nu er din container klar. Næste trin består i at installere Tag Manager-koden på dine AMP-sider.

I Tag Manager får du oplysninger om den bedste metode til installation af kodestykket, og du kan få yderligere vejledning i næste afsnit.

Tilføj Tag Manager-kodestykket

Når du har oprettet din nye AMP-container, vises skærmbilledet Installer Google Tag Manager. Du får to kodestykker via Tag Manager. Kopiér disse kodestykker, og indsæt dem, så de vises på dine AMP-sider.

Bemærk! Hvis du vil have adgang til kodestykket senere, skal du klikke på container-id'et øverst på oversigtssiden i dit arbejdsområde eller klikke på Administrator og derefter Installer Google Tag Manager.

Det første kodestykke tilføjer komponenten amp-analytics på din AMP-side. Denne kode placeres i slutningen af <head>-sektionen på din side og bør kun forekomme én gang på siden.

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

Vigtigt! Du skal kun tilføje denne kode på din side, hvis koden ikke er der i forvejen, og du skal sørge for, at den kun forekommer én gang pr. side.

Det andet kodestykke konfigurerer amp-analytics til brug af Tag Manager. Placer denne kode umiddelbart efter det indledende <body>-element. Erstat GTM-CONTAINER_ID med din Tag Manager-containers id, eller kopiér hele kodestykket fra Tag Manager-brugerfladen, og indsæt det.

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>

Konfigurer din container, og offentliggør den

Når containerkodestykket er installeret korrekt på dine sider, kan de aktivere tags, der er implementeret fra Tag Manager. Det næste trin består i at oprette tagkonfigurationer og offentliggøre containeren.

Sådan opretter du et nyt tag:

Klik på Tags Nyt.
Klik på Tagkonfiguration, og vælg tagtypen på listen over understøttede AMP-tags.
Konfigurer tagget med oplysninger fra din tagleverandør.
Klik på Aktivering, og tilføj en eller flere hændelsesbetingelser for aktivering af tagget.
Navngiv triggeren, og klik på Gem.

Gentag denne fremgangsmåde for at foretage yderligere tagkonfigurationer. Når din containerkonfiguration er klar, skal du offentliggøre din container for at få ændringerne til at træde i kraft.

Sidevariabler

Tag Manager er i stand til at registrere AMP-variabler og bruge dem i tag- og triggerkonfigurationer. Eksempelvis kan der på en side, som bruges til salg af sko, være variabler, der beskriver en bestemt skomodels egenskaber eller kendetegn. Disse værdier kan bruges til at oprette Tag Manager-variabler:

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=Tag Manager-XXXXXX;Tag Manager.url=SOURCE_URL" data-credentials="include">
  <script type="application/json ">
      {
          "vars" : {
              "type": "sko",
              "color": "rød"
          }
      }
  </script>
</amp-analytics>

Sådan opretter du en brugerdefineret variabel til registrering af farvevariablen fra ovenstående kode i Tag Manager:

Klik på Variabler.
Klik på Ny under Brugerdefinerede variabler.
Klik på Variabelkonfiguration, og vælg AMP-variabel.
Angiv feltnavnet (f.eks. "color") i feltet AMP-variabels navn.
Giv variablen et beskrivende navn (f.eks. "AMP-variabel – farve").
Klik på Gem.

AMP-tags, der understøttes i Tag Manager

Var disse oplysninger nyttige?

Hvordan kan vi forbedre siden?