Google Analytics Begrippenlijst

Google Analytics toevoegen aan Heroku

Image of Iron Brands

Gepubliceerd op 26 mrt 2024 en bijgewerkt op 2 apr 2025 door Iron Brands

Na het bouwen van je app wil je er zeker van zijn dat je de gebruikerservaring optimaliseert - en Google Analytics kan daarbij helpen! Hier lees je hoe je stap voor stap GA kunt toevoegen aan je Heroku-app.

Laten we erin duiken!

  1. Google Analytics instellen
  2. Google Analytics toevoegen aan uw toepassing
    1. Voor webtoepassingen (HTML, JavaScript):
    2. Voor toepassingen met één pagina (React, Angular, Vue.js):
  3. Uw toepassing uitrollen naar Heroku
  4. De integratie controleren
  5. Laatste gedachten

Voordat we beginnen moet je weten dat Google Analytics complex en een beetje onhandig is. Er zijn andere opties die je dezelfde inzichten geven in een overzichtelijk dashboard.

Simple Analytics is er daar één van. Een privacy-vriendelijke en eenvoudige analytics tool - precies de inzichten die je nodig hebt in een overzichtelijk dashboard. (En het is nog gratis ook).

Can you spot the difference between the dashboards?

Goed, laten we nu beginnen met het beantwoorden van je vraag!

Google Analytics instellen

Als je nog geen Google Analytics-account hebt ingesteld voor je app, moet je dat eerst doen. Hier lees je hoe je kunt beginnen:

  • Maak een Google Analytics-account aan: Ga naar de website van Google Analytics en meld je aan met je Google-account. Als je er geen hebt, moet je die aanmaken.
  • Maak een nieuwe woning aan: Volg de instructies op het scherm om een nieuwe GA4-eigenschap aan te maken en selecteer "Web" als uw platformtype.
  • Verkrijg uw meet-ID: Na het opzetten van uw eigendom, krijgt u een meet-ID (geformatteerd als "G-XXXXXXXXXX"). Noteer deze ID, want deze is nodig voor de integratie van GA met uw toepassing.

Google Analytics toevoegen aan uw toepassing

Om Google Analytics te integreren met een Heroku-applicatie moet je de GA-trackingcode toevoegen aan de codebase van je applicatie. Hier wordt uitgelegd hoe je dat kunt doen, afhankelijk van het framework van je applicatie:

Voor webtoepassingen (HTML, JavaScript):

  • Zoek de GA-trackingcode: Zoek in uw Google Analytics-account het JavaScript-trackingcodefragment voor uw GA4-eigenschap.
  • Sluit de traceercode in: Plak dit GA-trackingcodefragment in de <head>-tag van elk HTML-bestand in uw toepassing. Als uw toepassing een gemeenschappelijk sjabloon voor de head-sectie gebruikt, kunt u de code daar toevoegen om deze op alle pagina's toe te passen.

Voor toepassingen met één pagina (React, Angular, Vue.js):

  • Installeer de GA-bibliotheek: Gebruik voor frameworks zoals React, Angular of Vue.js de respectievelijke Google Analytics-bibliotheek of -module voor integratie (bijv. react-ga voor React-toepassingen).

  • GA initialiseren: Importeer en initialiseer de Google Analytics-module in de hoofdcomponent of het hoofdbestand van uw applicatie met behulp van uw Measurement ID.

    Bijvoorbeeld in een React-applicatie die react-ga gebruikt:

import ReactGA from 'react-ga'; ReactGA.initialize('Your-GA-Measurement-ID'); ReactGA.pageview(window.location.pathname + window.location.search);

Uw toepassing uitrollen naar Heroku

Nadat u Google Analytics in uw toepassing hebt geïntegreerd:

  • Commit je wijzigingen: Gebruik Git om de wijzigingen aan de codebase van je applicatie toe te voegen en vast te leggen.
  • Uitrollen naar Heroku: Push de wijzigingen naar je Heroku app met Git. Als je Heroku's GitHub integratie gebruikt, zorg er dan voor dat de laatste wijzigingen naar je GitHub repository worden gepushed, en het implementatieproces zal automatisch worden uitgevoerd.
  • (Optioneel) Maak nieuwe eigenschappen aan: Gebruik dezelfde trackingcode niet opnieuw om meerdere apps te volgen. Maak in plaats daarvan een nieuwe GA-eigenschap voor elke app en gebruik de bijbehorende traceercode.

De integratie controleren

Om ervoor te zorgen dat Google Analytics uw applicatie correct volgt:

  • Realtime verkeer controleren: Nadat u uw wijzigingen hebt geïmplementeerd en uw applicatie hebt geopend, logt u in op uw Google Analytics-account en navigeert u naar het rapport "Realtime" om te zien of uw activiteit wordt gevolgd.
  • Problemen oplossen indien nodig: Als u geen gegevens ziet in het Realtime-rapport, controleer dan de implementatie van uw trackingcode en het implementatieproces om er zeker van te zijn dat alles correct is geconfigureerd en geüpload.

Laatste gedachten

Google Analytics toevoegen aan je project kan je geweldige inzichten geven. Vraag jezelf echter af: is Google Analytics de juiste tool voor jou?

GA is een veel te krachtige oplossing voor eenvoudige analytics. Als je op zoek bent naar een eenvoudig en intuïtief dashboard met de inzichten die je nodig hebt, zijn er betere alternatieven.

Als dit je aanspreekt, voel je dan vrij om Simple Analytics eens uit te proberen. Je hoeft alleen maar het script aan je app toe te voegen en je kunt aan de slag. Dit duurt ongeveer een minuut en er is ook een gratis versie!

Veel plezier!