Hoe Google AMP-webpagina’s in te stellen met Google Analytics Tracking

7 min


127

Als u onlangs de wijzigingen van Google heeft gevolgd, is het u misschien opgevallen dat ze geobsedeerd raken door mobiel internet. En er zijn een paar sterke redenen om dat te ondersteunen.

Volgens Search Engine Land heeft Google officieel bevestigd dat mobiel zoeken de desktop in 2015 heeft overtroffen. Bovendien heeft Google in oktober 2016 mobiel-first indexering aangekondigd, dat zich richt op het prioriteren van de mobiele versie van de inhoud van een website via de desktopversie bij het toewijzen van zoekranglijsten .

Deze obsessie heeft geleid tot de introductie van Accelerated Mobile Pages(ook bekend als AMP) die primair zijn ontworpen om de mobiele gebruiker een meeslepende, bliksemsnelle website-ervaring te bieden.

Hoewel versnelde mobiele pagina’s vergelijkbaar zijn met generieke HTML-pagina’s, verwijdert in het AMP-framework aangepast JavaScript, het grootste deel van de CSS-stijl, widgets en plug-ins (inclusief originele Google Analytics-scripts / trackingcodes), waardoor pagina’s en berichten bijna worden geladen direct.

Om u een praktisch voorbeeld te geven van het verschil in belasting tussen AMP- en niet-AMP-pagina’s, bekijkt u de snelheidstests van https://www.wired.com/ hieronder:

Pagina niet-AMP

AMP-pagina

Zoals u kunt zien, hoewel de prestatiegraad niet drastisch is toegenomen, is het verschil in laadsnelheid dramatisch. Bekijk het maar, de AMP-versie is geladen in slechts 101ms. Dat is gewoon ongelooflijk.

Het is geweldig dat we een behoorlijke laadtijd hebben, maar zonder zware CSS – AMP’s zien er lelijk uit.

Goed punt, maar dat is niet de realiteit.

Als u enige tijd besteedt aan het aanpassen van AMP’s en alleen toepast wat is toegestaan ​​door het framework, merkt u nauwelijks het verschil tussen de AMP- en niet-AMP-pagina. In feite kunt u ze mogelijk (bijna) identiek maken.

Hier is een voorbeeld:

Wired Non-AMP Page

Bekabelde AMP-pagina

Dus nu we de basisbeginselen behandeld hebben, laten we verder gaan en zien wat de werkelijke voordelen van AMP’s zijn.

  1. Snelheid (voor gebruikers): het eerste voordeel dat in je opkomt, is dat de bliksemsnelle AMP’s te bieden hebben. Het is oud nieuws dat mobiele gebruikers voortdurend te maken hebben met vertragingen op de website, vooral als het gaat om mobiel zoeken. Daarom zijn versnelde mobiele pagina’s op dit moment erg handig.
  2. Gebruikerservaring (voor gebruikers): AMP’s brengen de gebruikerservaring naar een geheel nieuw niveau. Eindeloze pop-ups, self-playing video’s en vervelende animaties zijn allemaal uitgekleed met het AMP-framework, waardoor gebruikers een meeslepende ervaring op uw site en het belangrijkste ‘ingrediënt’ – de inhoud.
  3. Toegankelijkheid (voor gebruikers): hoewel de wereld ongelofelijk snel op weg is om iedereen te voorzien van snelle internetverbindingen, toch hebben sommige landen te maken met slak-trage verbindingen. Het AMP-framework komt binnen als een sloopkogel die de muren van slechte internetverbindingen vernietigt.
  4. Topverhalen-carrousel (voor uitgevers): versnelde mobiele pagina’s bieden u de mogelijkheid om te verschijnen in ‘topverhalen’ – de mobiele carrousel die te vinden is bovenaan de zoekresultaten van Google. Dit onthult een mogelijkheid voor de site-eigenaar om meer verkeer naar zijn website te genereren.
  5. Verbeterd gebruikersgedrag (voor uitgevers): als resultaat van een betere gebruikerservaring en snel ladende pagina’s zullen mensen waarschijnlijk meer pagina’s bekijken en zich bezighouden met de site, waardoor het bouncepercentage daalt.
  6. Verhoogde advertentie-inkomsten (voor uitgevers): volgens Google zien meer dan 90% van de uitgevers hogere klikfrequenties en de overgrote meerderheid van hen ziet hogere eCPM’s.

Laten we nu verder gaan met het integreren van Accelerated Mobile Pages. We zullen bijvoorbeeld een WordPress-website gebruiken.

AMP toevoegen aan WordPress

Het integreren van AMP met WordPress is redelijk eenvoudig en komt eenvoudigweg neer op het downloaden van de officiële AMP-plug-in voor WordPress.

Nadat u de plug-in hebt gedownload en geactiveerd, worden er automatisch AMP-versies van uw berichten gegenereerd (de plug-in ondersteunt momenteel geen pagina’s).

Als u wilt zien hoe uw AMP’s er uit zien, voert u gewoon / amp / aan het einde van de URL van uw bericht in. Hier is een voorbeeld:

URL van niet-AMP-bericht

AMP Bericht-URL

Het is ook de moeite waard om te controleren of uw AMP-versie van de post een tag ‘ rel = canonical ‘ bevat die verwijst naar de overeenkomstige versie van die post (dwz de oorspronkelijke versie).

Ga om dat te controleren naar een bepaalde AMP-pagina en ‘bekijk bron’ van de pagina. Je zou dan moeten zoeken naar de regel die begint met ‘<link rel = ” canonical”  . Zie een voorbeeld hieronder:

Altviool! Hoewel uw AMP’s vrij algemeen zullen lijken zonder enige aanvullende stijl, bent u klaar om vanaf hier te gaan.

Google Analytics (GA) toevoegen

Nu kunnen we doorgaan en onze versnelde mobiele pagina’s trackable maken door Google Analytics te integreren.

Eerst en vooral wordt het aanbevolen om een ​​nieuwe Google Analytics-property toe te voegen om gegevens van uw AMP’s te verzamelen.

Log hiervoor in op uw bestaande Google Analytics, ga naar ‘Beheerder’ , klik op het dropdown-menu ‘Eigenschappen’ en klik op ‘Nieuwe eigenschap maken’ .

Nadat u een nieuwe eigenschap hebt toegevoegd, moet u uw tracking-ID pakken door naar ‘Beheerder’ > ‘Eigenschap’ > ‘Instellingen voor eigenschappen’ te gaan .

Het ziet er ongeveer zo uit:

UA-11.111.111-7

Nu u uw nieuwe GA-property-instelling hebt, kunnen we nu verder gaan en Google Analytics integreren met onze nieuw toegevoegde AMP’s.

Er zijn twee manieren om dit te doen:

Methode 1

Installeer Lijm voor Yoast SEO & AMP- plug-in.

Deze plug-in biedt u niet alleen de mogelijkheid om GA-tracking toe te voegen aan uw AMP’s, maar het stelt u ook in staat om het uiterlijk van uw versnelde mobiele pagina’s aan te passen, althans tot op zekere hoogte.

Zodra je de plug-in hebt geïnstalleerd, ga je naar de instellingen en klik je op het tabblad ‘Analytics’ .

Let op: generieke GA-scripts werken niet met het AMP-framework, dus u moet een AMP-specifieke JSON-versie van uw GA-script toevoegen.

Voeg eenvoudig de volgende regels toe aan het volgveld in Yoast Lijm AMP-analyses. Zorg ervoor dat u een standaard tracking-id vervangt door uw unieke ID.

<amp-analytics type = “googleanalytics”> 
<script type = “application / json”> 

“vars”: { 
“account”: “UA-XXXXX-Y” – vervang dit door uw trackingcode
}, 
“triggers”: { 
“TrackPageview”: { 
“on”: “visible”, 
“request”: “paginaweergave” 
  } 
 } 

</ script> 
</ amp-analytics>

Het is vermeldenswaard dat deze methode mogelijk niet voor iedereen werkt. Om problemen met uw GA-installatie met deze aanpak op te lossen, opent u een van uw versnelde mobiele pagina’s, navigeert u naar Google Analytics en controleert u realtime-sessies. Als u live verkeer ziet, is uw GA-script correct geïnstalleerd.

Anders, als u geen live sessies ziet, is deze methode waarschijnlijk niet voor u gewerkt. In dit geval moet u de onderstaande methode volgen.

Methode 2

Deze aanpak is iets ingewikkelder, maar zal zeker werken.

Ga eerst naar je WordPress-dashboard en ga naar ‘Plug-ins’ . Zoek vervolgens de officiële AMP-plug-in en klik op ‘Bewerken’ .

Kies amp / templates / single.php uit de lijst met plug- inbestanden aan de rechterkant van het scherm.

Om ervoor te zorgen dat uw script werkt, moet u eerst het volgende AMP-script plaatsen tussen <head> en </ head> -tags, zoals in de onderstaande afbeelding.

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

Plaats vervolgens de volgende JSON-trackingcode tussen <body> en </ body>-tags, zoals wordt weergegeven in de onderstaande afbeelding.

<amp-analytics type = “googleanalytics”> 
<script type = “application / json”> 

“vars”: { 
“account”: “UA-XXXXX-Y” – vervang dit door uw trackingcode
}, 
“triggers”: { 
“TrackPageview”: { 
“on”: “visible”, 
“request”: “paginaweergave” 
  } 
 } 

</ script> 
</ amp-analytics>

Let op: deze specifieke trackingcode wordt gebruikt om paginaweergaven bij te houden. Als u gebeurtenissen wilt bijhouden, gebruik dan de basis van de onderstaande code:

<amp-analytics type = “googleanalytics”> 
<script type = “application / json”> 

“vars”: { 
“account”: “UA-XXXXX-Y” – vervang dit door uw trackingcode
}, 
“triggers”: { 
“TrackClickOnHeader”: { 
“on”: “click”, 
“selector”: “#header”, 
“request”: “event”, 
“vars”: { 
“eventCategory”: “ui-components”, 
“eventAction”: “Header-click” 
   } 
  } 
 } 

</ script> 
</ amp-analytics>

Als u sociale interacties wilt bijhouden om te zien hoeveel mensen op uw pictogrammen voor sociaal delen klikken, gebruikt u de basis van de onderstaande code:

<amp-analytics type = “googleanalytics”> 
<script type = “application / json”> 

“vars”: { 
“account”: “UA-XXXXX-Y” – vervang dit door uw trackingcode
}, 
“triggers”: { 
“TrackClickOnTwitterLink”: { 
“on”: “click”, 
“selector”: “# tweet-link”, 
“request”: “social”, 
“vars”: { 
“socialNetwork”: “twitter”, 
“socialAction”: “Tweet”, 
“socialTarget”: “https://www.examplepetstore.com” – Vervangen door uw eigen URL
   } 
  } 
 } 

</ script> 
</ amp-analytics>

U kunt ook andere sociale netwerken zoals Facebook en Google+ toevoegen.

Voor meer informatie over het bijhouden van evenementen en sociale interacties, ga dan leren hier .

Problemen met Google Analytics-integratie oplossen

Als u wilt controleren of uw GA-tracking correct is geïmplementeerd, opent u een van uw AMP-pagina’s en gaat u naar uw Google Analytics-dashboard. Klik vervolgens op ‘Realtime’ > ‘Overzicht’ .

Als u live verkeer ziet, werkt uw script correct.

Het is ook de moeite waard om de validatie van uw AMP’s te controleren. Ga hiervoor naar AMP Validator voor Search Console en voer uw AMP-URL in.

De hulpprogramma’s geven weer of uw pagina een geldige AMP is. Als dit niet het geval is, controleert u & repareert u alle fouten.

Conclusie

Versnelde mobiele pagina’s kunnen buitengewoon krachtig en effectief zijn voor grote online publicaties, persbureaus en blogs met veel verkeer. Als u eenvoudig een bedrijfswebsite van 5 pagina’s beheert en niet regelmatig inhoud produceert, hoeft u zich op dit moment niets aan te trekken.

Voordat u AMP op uw site integreert, moet u ervoor zorgen dat u al een gewone mobiele versie van de website heeft.

Over de auteur: Dmytro is hoofd-wizard bij Solvid , een creatief agentschap voor inbound-marketing en -software in Londen, Verenigd Koninkrijk. Zijn werk is gekenmerkt en vermeld in een breed scala van publicaties, waaronder The Next Web, Business2Community, The Huffington Post, Sitepoint, SEMRush, Lifehack, Backlinko en meer. Hij is ook de auteur van de Ultimate Guide To Blogging Tools .


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format