Lær deg hvordan du setter opp Google Tag Manager Server side

11.01.23


11 minutter

Vil du få bedre kontroll på dataene dine? Lær å sette opp Google Tag Manager på din egen server. Her får du oppskriften.

De fleste nettsider gjør datainnsamlingen sin via klienter hvor data sendes rett inn til Google, Facebook eller noen av de andre kanalene. Det er en lettvint måte å gjøre det på, men gir deg mindre kontroll på dataene.

For å få bedre kontroll og eierskap til dataene kan du gjøre datainnsamlingen på en egen server. Det starter ofte med Google Tag Manager (GTM). Her skal vi gå gjennom hvordan du kan sette opp Google Tag Manager til å kjøre på en server. 

NB: Denne guiden krever at du har noe teknisk kompetanse. Hvis du ønsker hjelp med dette, er det bare å ta kontakt med oss.

Dette trenger du for å sette opp server-side tagging

Du trenger en egen server for å sette opp dette. Her er det flere muligheter, men vi benytter oss av Linode til å hoste våre servere i EU. Enhver form for eVM/VPS vil fungere, så lenge det er støtte for å installere egne biblioteker og endre konfigurasjonen på den.

  • 2 VPS-er (Ubuntu 22.04 LTS (eller en form for LTS))
    • 1 VPS som preview server (gtm.domene.no)
    • 1 VPS som proxy server (analytics.domene.no)
  • SSH tilgang
    • Slik at du får tilgang til serverne
  • DNS tilgang
    • Sette opp DNS pekere mot serverne vi setter opp

Før du starter

Før du starter med å sette opp Google Tag Manager anbefaler vi at du setter opp både subdomener og en VPS.

Konfigurering av DNS

Sett opp et subdomene i din DNS som peker mot den nye serveren. Eksempelvis: gtm.digitalopptur.no. Dette er nødvendig for at vi skal kunne verifiserer sertifikatet til serveren, samt sikker tilkobling når vi begynner å sende data til serveren.

Sett opp en VPS (virtual private server)

Før du starter å sette opp dine nye servere er det anbefalt å sette opp DNS pekerne, da det kan ta opptil 24 timer før de blir gyldige. Vi benytter følgende domenestruktur i våre oppsett:

Preview server: preview/gtm.domene.no

Server cluster: gtm.domene.no

Oppsett av server-side servere

Som nevnt innledningsvis trenger vi å sette opp to servere. Det er sterkt anbefalt å ha en preview server som håndterer alle forespørslene, samt et cluster som delegerer dette.

Installasjon av preview server

Bestill en virtuell server (VPS) hos din favoritt hostingsleverandør (ja, vi har faktisk en favoritt). Når denne er satt opp anbefales det å installere et OS med LTS (Long Term Support). Vi benytter oss av en Ubuntu 22.04 LTS distribusjon av OS-et, da det er brukervennlig og stabilt.

Når du har satt opp VPS-en må du hente inn pakkelistene til systemet. Dette gjøres ved å kjøre følgende kommando:

@root#: sudo apt update

For å oppdatere pakkene kjører du følgende kommando:

@root#: sudo apt upgrade

Merk: Om du bruker CentOS eller RHEL basert system kan du bytte ut “apt” med “yum”, eller tilsvarende kommando for din pakkebehandler.

Pakker du trenger for å sette opp Google Tag Manager

For at vårt system skal kunne kjøre server-side tagging server trenger vi å installere en del nødvendige pakker. Her forklarer vi hva de er, og hvorfor du trenger dem.

  • Lets Encrypt
  • Nginx
  • Docker “depot” (repository)
  • Docker
  • Docker compose
Hva er Let’s encrypt/GNUPG:

Dette er nødvendig for å kunne generere og vedlikeholde SSL sertifikatene til domenet og serveren. Nginx, som vil bli vår webserver, er avhengig av å ha et sertifikat for å servere trafikk over https.

Hva er Nginx:

Dette er et verktøy som gjør det mulig for andre eksterne tjenester å snakke med serveren vår. Det er nødvendig for at serveren skal skjønne at den f.eks. skal håndtere forespørsler fra preview.domene.no. Bedre kjent som en webserver. Du kan benytte deg av Apache2 hvis du vil, men Nginx er det desidert letteste å sette opp og vedlikeholde.

Hva er Docker:

Dette er et bibliotek som som gjør det mulig å kjøre flere prosesser i mindre docks. Dette gjør miljø stabilt, effektivt og sikkert. I tillegg blir det lett å skalere opp med flere servere på et senere tidspunkt ved å benytte Docker-bilder.

Hva er Docker-compose:

Dette er en utvidelse til Docker som er nødvendig for å “bygge” preview-serveren og software-pipelinen vår. 

Slik installerer du pakker

For å installere nødvendige pakker/biblioteker kjører du følgende kommandoer:

@root#: sudo apt-get install ca-certificates curl gnupg lsb-release
@root#: sudo mkdir -p /etc/apt/keyrings
@root#: curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
@root#: echo \ "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg]  https://download.docker.com/linux/ubuntu \ $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

Hent nye pakker med følgende kommando og installer dem:

@root#: sudo apt update
@root#: apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin

Verifiser at installasjonen var vellykket og at Docker kjører på maskinen. Dette gjør du ved å kjøre følgende kommando:

@root#: systemctl status docker

For å sette opp Docker Compose kjører du følgende kommandoer:

@root#: mkdir -p ~/.docker/cli-plugins/
@root#: curl -SL  https://github.com/docker/compose/releases/download/v2.5.0/docker-compose-linux-x86_64 -o ~/.docker/cli-plugins/docker-compose
@root#: chmod +x ~/.docker/cli-plugins/docker-compose

Verifiser at installasjonen var vellykket:

@root#: docker compose version

(skal vise versjon 2.5.0)

Når du har alle de nødvendige pakkene over installert er vi klare til å starte preview-serveren vår. Dette gjøres via et Docker-script (docker-compose.yml) som vil starte tre instanser:

  1. Let’s encrypt
    1. Oppdaterer og setter opp SSL-sertifikat for domenet serveren har
  2. Nginx
    1. Reverse proxy for å sende trafikk korrekt
  3. Gtm-server
    1. Google sin docker instanse av server-side tagging server

Merk at det er kun mulig å videresende ett domene til port 8080 og 443 pr server internt, fordi Nginx binder/låser portene til en prosess.

Automatiser oppsettet av SSL, Nginx og GTM-server

For å bygge bildet vi skal benytte oss av har vi lagt ut docker-compose.yml som du kan benytte. Det automatiserer oppsettet av SSL, Nginx og GTM-server. Merk at du må justere filen i henhold til ditt oppsett.

Endre verdien til følgende parametre:

CONTAINER_CONFIG: GTM serverside ID til containeren din.
RUN_AS_PREVIEW: true
VIRTUAL_HOST: preview.domene.no
Annen HOST: preview.domene.no

Eksempel på hvordan docker-compose.yml kan se ut:

services:
    nginx:
        container_name: nginx
        image: nginxproxy/nginx-proxy
        restart: unless-stopped
        ports:
            - 80:80
            - 443:443
        volumes:
            - /var/run/docker.sock:/tmp/docker.sock:ro
            - /var/docker/nginx/html:/usr/share/nginx/html
            - /var/docker/nginx/certs:/etc/nginx/certs
            - /var/docker/nginx/vhost:/etc/nginx/vhost.d
        logging:
            options:
                max-size: "10m"
                max-file: "3"
    letsencrypt-companion:
        container_name: letsencrypt-companion
        image: jrcs/letsencrypt-nginx-proxy-companion
        restart: unless-stopped
        volumes_from:
            - nginx
        volumes:
            - /var/run/docker.sock:/var/run/docker.sock
            - /var/docker/nginx/acme:/etc/acme.sh
        environment:
            DEFAULT_EMAIL: DIN EPOST
    gtm-cluster-digitalopptur:
        container_name: gtm-cluster
        image: gcr.io/cloud-tagging-10302018/gtm-cloud-image:stable
        expose:
            - "8080"
        environment:
            CONTAINER_CONFIG: GTM ID
            RUN_AS_PREVIEW: true
            VIRTUAL_HOST: DOMENET TIL KUNDEN
HOST: DOMENET TIL KUNDEN

Når du har gjort nødvendige endringer i filen lagrer du den og kjører følgende kommando. (DNS må peke domenet til serveren for at SSL skal bli satt opp og installert).

@root#: docker compose up -d

For å se om instansene kjører kan du kjøre følgende kommando:

@root#: docker ps

Du skal nå kunne nå preview-serveren din ved å navigere seg til VIRTUAL_HOST_DOMAIN adressen du satte i Docker filen din. F.eks: https://preview.domene.no/healthz skal da vise “ok”.

Merk: det er sterkt anbefalt å benytte seg av en “preview server” per dokumentasjonen til Google rundt server-side tagging.

Installasjon av server cluster

Installasjon av selve clusteret er tilnærmet lik måte vi gjorde det på i preview-serveren. Det eneste som vil forskjellig er selve docker-filen vi bruker til å kjøre opp instansene.

Installere pakker

For at vårt system skal kunne kjøre server-side tagging server trenger vi å installere en del nødvendige pakker.

  • Lets Encrypt
  • Nginx
  • Docker
  • Docker compose

Forklaring på hva de forskjellige pakkene/biblioteken gjøre kan du lese lengre opp i innlegget.

Når dette er gjort laster du opp/lagrer følgende fil på serveren. Begge Docker-bildene ligger nederst i innlegget og kan lastes ned, eller kopier innholdet under og lagre det som docker-compose.yml

Docker-compose.yml

services:
    nginx:
        container_name: nginx
        image: nginxproxy/nginx-proxy
        restart: unless-stopped
        ports:
            - 80:80
            - 443:443
        volumes:
            - /var/run/docker.sock:/tmp/docker.sock:ro
            - /var/docker/nginx/html:/usr/share/nginx/html
            - /var/docker/nginx/certs:/etc/nginx/certs
            - /var/docker/nginx/vhost:/etc/nginx/vhost.d
        logging:
            options:
                max-size: "10m"
                max-file: "3"
    letsencrypt-companion:
        container_name: letsencrypt-companion
        image: jrcs/letsencrypt-nginx-proxy-companion
        restart: unless-stopped
        volumes_from:
            - nginx
        volumes:
            - /var/run/docker.sock:/var/run/docker.sock
            - /var/docker/nginx/acme:/etc/acme.sh
        environment:
            DEFAULT_EMAIL: DIN EPOST
    gtm-cluster-digitalopptur:
        container_name: gtm-cluster
        image: gcr.io/cloud-tagging-10302018/gtm-cloud-image:stable
        expose:
            - "8080"
        environment:
            CONTAINER_CONFIG: GTM KODE
            PREVIEW_SERVER_URL: https://URL_TIL_PREVIEW_SERVER
            VIRTUAL_HOST: DOMENET TIL KUNDEN
            LETSENCRYPT_HOST: DOMENET TIL KUNDEN

Endre verdien til følgende parametre:

CONTAINER_CONFIG: Lim inn koden du får fra GTM serverside containeren din.
PREVIEW_SERVER_URL: preview.domene.no
VIRTUAL_HOST: analytics.domene.no
Annen HOST: analytics.domene.no

Merk: Du vil må ha et eget domene for preview, og cluster-serverne dine.

Når Docker-filen er redigert kan du lagre den, og kjøre følgende kommando for å sette opp clusteret ditt:

@root#: docker compose up -d

(starter instansene)

@root#: docker compose up -d

(verifiserer at instansene kjører)

Når du har satt opp både en preview-server og et cluster kan du fortsette til å sette opp Google Tag Manager på klientside, samt serversiden. Vi tar utgangspunkt i at du allerede har GA4 installert i Tag Manager til siden du ønsker å sette opp server-side tagging på.

Oppsett av Tag Manager Client/Server

Sett opp vanlig GTM Client-beholder som implementeres i nettsiden på normal måte via “head/body”.

Først setter vi opp Tag Manager for Client Side. Logg inn på tagmanager.google.com og trykk på “opprett en konto”. Fyll inn nødvendig info: Kontonavn, land og navn på beholder. Velg deretter “Nett” under “Målplattform”, og kontoen er opprettet.

Slik gjør du en GA4-konfigurasjon

  1. Trykk på “Legg til en ny Tag” og under “Tag konfigurasjon velger du “Google Analytics: GA4 Configuration”.
  2. Legg til din målings-ID fra Google Analytics 4. (Denne finner du i GA4 under Admin → Data strømmer og klikk på din data strøm). Eks: G-A2ABC2ABCD.
  3. Huk av for “Send to server beholder” og lim inn URL-en til “cluster-domenet”.
  4. Videre trykker du på “Trigger” og velger “Alle sider”.
  5. Lagre taggen med et beskrivende navn. Eks: GA4 - Configuration.
  6. Når taggen er satt opp skal den se slik ut:

Videre konfigurerer du GA4 med aktuelle eventer og triggere i kontoen.

Oppsett av Tag Manager Server

Når du allerede har satt opp Tag Manager for Client Side navigerer du deg til kontooversikten i Tag Manager og trykker på de tre prikkene ved siden av tannhjulet.

Trykk på opprett beholder og skriv inn navnet på beholderen og velg “Server”. Trykk “Opprett” i høyre hjørne.

Du blir nå sendt til din serverbeholder i Tag Manager og får opp følgende bilde: Velg manuell installering og ta vare på beholderkonfigurasjonen din (brukes i oppsett av preview server som vi har snakket om lenger opp).

Videre velger du tagger i menyen på venstre side og oppretter en ny tag. I taggen legger du inn måle-ID-en fra ditt GA4-område (den samme du bruker på Tag Manager Client). Huk av “true” under “Redact visitor address”. Deretter velger du “Alle sider” som trigger. Navngi taggen som “GA4 - Konfigurasjon”. Taggen skal se ut som på bildet under.

Siste ledd for å sette opp Google Tag Manager: Implementering av Tag Manager Client

Tag Manager Client må nå implementeres på nettsiden hvis dette ikke allerede er gjort. Bruk Googles standard for GTM implementering, altså legg til GTM-koden i <head> og <body>.

Når Tag Manager client-koden er lagt til vil du se at server og client-beholderne kommuniserer når du bruker forhåndsvisning. Du kan nå begynne å sette opp Conversion API hos f.eks. Meta og Snapchat.


Gratulerer! Du har enten scrollet helt til enden for å kontakte oss, eller du har prestert å sette opp Google Tag Manager! Om du ønsker å sette opp Conversion API kan du lese mer om det her, ellers vil vi anbefale deg å melde deg på nyhetsbrevet vårt.

På utkikk etter mer lesestoff?

Meld deg på vårt nyhetsbrev
 
Alle rettigheter reservert 2024