Installatiegids voor AMP en Tag Manager

Het Accelerated Mobile Pages-project (AMP) is een open-sourcewebplatform waarmee de prestaties van uw webcontent kunnen worden verbeterd. AMP omvat ingebouwde ondersteuning voor Google Tag Manager. Dit document beschrijft de aanbevolen manier om Google Tag Manager in te stellen op AMP-pagina's.

Tag Manager voor AMP installeren:

Maak een AMP-container in Tag Manager.
Voeg het Tag Manager-fragment toe aan uw AMP-pagina's.
Configureer tags in uw Tag Manager-container en publiceer deze.

Een AMP-container maken

Tag Manager omvat een AMP-containertype. Maak een nieuwe AMP-container voor uw project:

Klik in het scherm Accounts op Meer acties () voor het account dat u wilt gebruiken. Selecteer Container maken.
Geef de container een naam. Gebruik een beschrijvende naam, bijvoorbeeld "example.com - nieuws - AMP".
Onder Waar wordt de container gebruikt selecteert u AMP.
Klik op Maken.

De container is nu klaar. Bij de volgende stap installeert u de Tag Manager-code op uw AMP-pagina's.

Tag Manager geeft informatie over de beste manier om het codefragment te installeren. Daarnaast kunt u het volgende gedeelte raadplegen voor meer informatie.

Het Tag Manager-fragment toevoegen

Nadat u de nieuwe AMP-container heeft gemaakt, verschijnt het scherm Google Tag Manager installeren. Tag Manager biedt twee codefragmenten. Kopieer deze codefragmenten, zodat ze worden weergegeven op uw AMP-pagina's.

Opmerking: Als u later toegang wilt tot het codefragment, klikt u op het nummer van de container-ID bovenaan de overzichtspagina van uw werkruimte of klikt u op Beheerder en vervolgens op Google Tag Manager installeren.

Met het eerste fragment wordt de component amp-analytics toegevoegd aan de AMP-pagina. Deze code wordt aan het einde van het gedeelte <head> van uw pagina geplaatst en mag maar één keer op de pagina worden weergegeven.

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

Belangrijk: Voeg deze code alleen aan de pagina toe als deze nog niet bestaat en zorg ervoor dat deze slechts eenmaal per pagina wordt weergegeven.

Met het tweede fragment wordt amp-analytics geconfigureerd om Tag Manager te gebruiken. Plaats deze code direct na het openingselement <body>. Vervang GTM-CONTAINER_ID door uw container-ID van Tag Manager of kopieer en plak het volledige fragment via de Tag Manager-gebruikersinterface.

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

Uw container configureren en publiceren

Wanneer het containerfragment correct op uw pagina's is geïnstalleerd, kunnen tags worden geactiveerd die zijn geïmplementeerd vanuit Tag Manager. In de volgende stap worden tagconfiguraties gemaakt en wordt de container gepubliceerd.

Een nieuwe tag maakt u als volgt:

Klik op Tags Nieuw.
Klik op Tagconfiguratie en selecteer het tagtype in de lijst met ondersteunde AMP-tags.
Configureer de tag met informatie van uw tagleverancier.
Klik op Triggers en voeg een of meer gebeurtenisvoorwaarden toe waardoor de tag wordt geactiveerd.
Geef de trigger een naam en klik op Opslaan.

Herhaal deze stappen voor eventuele aanvullende tagconfiguraties. Wanneer de containerconfiguratie gereed is, publiceert u uw container zodat de wijzigingen van kracht worden.

Paginavariabelen

Tag Manager kan AMP-variabelen vastleggen en deze gebruiken in tag- en triggerconfiguraties. Een pagina die schoenen verkoopt, kan bijvoorbeeld variabelen hebben die de eigenschappen van een bepaalde schoen beschrijven. Deze waarden kunnen worden gebruikt om Tag Manager-variabelen te maken:

<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": "schoenen",
              "color": "rood"
          }
      }
  </script>
</amp-analytics>

Een door de gebruiker gedefinieerde Tag Manager-variabele die de kleurvariabele van bovenstaande code vastlegt maakt u als volgt:

Klik op Variabelen.
Klik onder Door de gebruiker gedefinieerde variabelen op Nieuw.
Klik op Variabeleconfiguratie en selecteer AMP-variabele.
Voer in het veld Naam van AMP-variabele de veldnaam in (bijv. "kleur".)
Geef de variabele een beschrijvende naam (bijv. "AMP-variabele - kleur".)
Klik op Opslaan.

AMP-tags met ondersteuning voor Tag Manager

Was dit nuttig?

Hoe kunnen we dit verbeteren?