Configurare Meta Pixel e Meta CApi su WordPress tramite GTM e GA4

In questo articolo cercheremo di configurare correttamente il Tracciamento Meta per WordPress usando la soluzione Ibrida Pixel + Capi server side. Lo faremo sia per WP standard che per Woocommerce.

Guida Completa: Tracking Meta Pixel + CAPI con GTM Server-Side

Obiettivo: Implementare tracking Meta dual (Browser + Server) per bypassare ad-blockers e migliorare Event Match Quality.

Prerequisiti:

WordPress installato e funzionante
Child theme attivo
Accesso SSH al server
Meta Pixel ID
Server con Docker installato

📚 Indice

Configurazione GTM Server-Side Container
Configurazione Nginx per GTM Proxy
Configurazione GTM Web Container
Configurazione GTM Server Container
Implementazione Meta Pixel nel Child Theme
Event ID per Deduplicazione
Test e Verifica

1. Configurazione GTM Server-Side Container

Teaching Note

Il Server-Side Container di GTM gira in un container Docker (una scatola isolata virtuale che consente di far girare delle applicazioni, in questo caso specifico il tracciamento Meta Server Side su Google) sul tuo server. Questo permette di ricevere eventi dal browser e inoltrarli a Meta (e altri servizi) dal server, bypassando ad-blockers e tracking prevention dei browser.

1.1 Crea Directory e Docker Compose

# Crea directory di lavoro
sudo mkdir -p /opt/gtm-server
cd /opt/gtm-server

# Crea file docker-compose.yml
sudo nano docker-compose.yml

Contenuto:

version: '3'
services:
  gtm-server:
    image: gcr.io/cloud-tagging-10302018/gtm-server-side:latest
    container_name: gtm-server
    restart: unless-stopped
    ports:
      - "8080:8080"
    environment:
      - CONTAINER_CONFIG=YOUR_CONTAINER_CONFIG_STRING
      - PORT=8080
      - RUN_AS_PREVIEW_SERVER=false
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "3"

Sostituisci YOUR_CONTAINER_CONFIG_STRING con il valore che trovi in GTM:

Vai su https://tagmanager.google.com
Crea un nuovo Container di tipo “Server”
Vai su Admin → Container Settings → “Manually provision tagging server”
Copia la stringa di configurazione

1.2 Avvia Container Docker

# Avvia container
sudo docker-compose up -d

# Verifica che sia attivo
sudo docker ps | grep gtm-server

# Controlla log
sudo docker logs gtm-server

Teaching Note: Il container GTM ora ascolta sulla porta 8080 del server. Non è esposto direttamente a internet – lo esporremo tramite Nginx con proxy su path /gtm.

2. Configurazione Nginx per GTM Proxy

Teaching Note

Nginx fa da proxy tra il browser e il container Docker. Quando il browser richiede https://www.tuo-dominio.com/gtm/..., Nginx inoltra la richiesta al container Docker sulla porta 8080. Questo permette di usare il tuo dominio invece del dominio Google, migliorando la privacy e l’affidabilità.

2.1 Aggiungi Location Block in Nginx

sudo nano /etc/nginx/sites-available/tuo-sito

All’interno del blocco server HTTPS (porta 443), aggiungi:

# GTM Server-Side Proxy
location /gtm/ {
    proxy_pass http://localhost:8080/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_read_timeout 90;
}

Posizione: Inserisci questo blocco DOPO le configurazioni root e index, ma PRIMA dei blocchi location ~ \.php$.

2.2 Test e Reload Nginx

sudo nginx -t
sudo systemctl reload nginx

2.3 Verifica Proxy

curl -I https://www.tuo-dominio.com/gtm/

Dovresti vedere una risposta (anche se 404 o 400 va bene – significa che Nginx sta comunicando con il container).

Teaching Note: Ora il path /gtm del tuo dominio è collegato al Server Container. Quando configureremo GTM, tutti gli eventi passeranno da qui invece che da Google direttamente.

3. Configurazione GTM Web Container

Teaching Note

Il Web Container viene caricato nel browser dell’utente e raccoglie eventi (PageView, click, ecc.). Lo configureremo per inviare gli eventi al Server Container invece che direttamente a Google Analytics o Meta.

3.1 Crea GTM Web Container

Vai su https://tagmanager.google.com
Crea un nuovo Container di tipo “Web”
Copia il Container ID (es. GTM-XXXXXXX)

3.2 Installa GTM nel Child Theme

Edita il file functions.php del child theme:

sudo nano /var/www/tuo-sito/wp-content/themes/tuo-child-theme/functions.php

Aggiungi:

<?php
// Google Tag Manager - Head
add_action('wp_head', 'gtm_head_script', 1);
function gtm_head_script() {
    ?>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
    <!-- End Google Tag Manager -->
    <?php
}

// Google Tag Manager - Body
add_action('wp_body_open', 'gtm_body_noscript', 1);
function gtm_body_noscript() {
    ?>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <?php
}

Sostituisci GTM-XXXXXXX con il tuo Container ID.

Teaching Note: Questi hook WordPress inseriscono il codice GTM in <head> e subito dopo <body> come richiesto da Google. Il dataLayer verrà popolato automaticamente da GTM.

3.3 Configura Tag GA4 con Server Container URL

Nel GTM Web Container:

Tag → Nuovo → Google Analytics: GA4 Configuration
Nome: GA4 to Server Container
Measurement ID: Il tuo GA4 ID (es. G-XXXXXXXXX)
Configurazione avanzata:
- server_container_url: https://www.tuo-dominio.com/gtm
- transport_url: https://www.tuo-dominio.com/gtm
Trigger: All Pages
Salva e Pubblica

Teaching Note: Questi parametri dicono a GA4 di inviare gli eventi al tuo server (via /gtm) invece che direttamente a Google. Il Server Container li riceverà e li processerà.

4. Configurazione GTM Server Container

Teaching Note

Il Server Container riceve gli eventi dal Web Container e li inoltra a Meta tramite Conversion API. Questo avviene server-side, quindi gli ad-blockers non possono bloccarlo.

4.1 Configura Client “GTM Web Container”

Nel GTM Server Container (quello di tipo “Server”):

Clients → Nuovo
Tipo: Google Tag Manager: Web Container Client
Nome: GTM Web Container Client
Lascia configurazione default
Salva

Teaching Note: Il Client dice al Server Container di accettare eventi provenienti dal Web Container GTM. Senza questo, il server non riceverebbe gli eventi.

4.2 Crea Tag Meta Conversion API

Tag → Nuovo
Tipo: Facebook Conversions API
Nome: Meta CAPI - All Events
Configurazione:
- Pixel ID: Il tuo Meta Pixel ID
- API Access Token: Genera in Meta Events Manager → Settings → Conversions API → Generate Access Token
- Event Name Setup Method: Inherit from client
- Action Source: website
- Test Event Code: TEST123 (per debugging – rimuovi in produzione)
Trigger: Tutti gli eventi (All Events o crea trigger custom)
Salva

Teaching Note: Questo tag intercetta gli eventi che arrivano al Server Container e li inoltra a Meta tramite Conversion API. L’Access Token permette al server di autenticarsi con Meta.

4.3 Pubblica Server Container

Clicca Submit in alto a destra e pubblica la versione.

Teaching Note: Pubblicare il Server Container attiva tutte le configurazioni. Da questo momento, gli eventi inizieranno a essere inoltrati a Meta dal server.

5. Implementazione Meta Pixel nel Child Theme

Teaching Note

Il Meta Pixel raccoglie eventi lato browser (veloce) mentre CAPI li invia dal server (affidabile). Insieme formano il “dual tracking” che massimizza la copertura degli eventi.

5.1 Aggiungi Meta Pixel Base nel Child Theme

Edita functions.php:

sudo nano /var/www/tuo-sito/wp-content/themes/tuo-child-theme/functions.php

Aggiungi:

<?php
// Meta Pixel Base Code
add_action('wp_head', 'meta_pixel_base_code', 2);
function meta_pixel_base_code() {
    ?>
    <script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    
    fbq('init', 'TUO_PIXEL_ID');
    fbq('track', 'PageView');
    </script>
    <noscript>
    <img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=TUO_PIXEL_ID&ev=PageView&noscript=1"/>
    </noscript>
    <?php
}

Sostituisci TUO_PIXEL_ID con il tuo Meta Pixel ID.

Teaching Note: Questo è il codice base del Meta Pixel che si carica su ogni pagina. Traccia PageView dal browser. Gli eventi andranno sia a Meta direttamente (browser) che al Server Container (che li reinvierà via CAPI).

6. Event ID per Deduplicazione

Teaching Note

Senza Event ID, Meta potrebbe contare lo stesso evento due volte (una dal browser, una dal server). L’Event ID univoco permette a Meta di riconoscere che sono lo stesso evento e contarlo una sola volta.

6.1 Modifica Meta Pixel con Event ID

Nel functions.php, modifica la funzione Meta Pixel:

<?php
// Meta Pixel con Event ID per Deduplicazione
add_action('wp_head', 'meta_pixel_with_event_id', 2);
function meta_pixel_with_event_id() {
    ?>
    <script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');

    // Genera Event ID univoco
    function generateEventId() {
        return 'evt_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
    }

    var eventId = generateEventId();

    // Invia a Meta Pixel con Event ID
    fbq('init', 'TUO_PIXEL_ID');
    fbq('track', 'PageView', {}, {eventID: eventId});

    // Invia Event ID al dataLayer per il Server Container
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'fb_event_id': eventId
    });
    </script>
    <noscript>
    <img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=TUO_PIXEL_ID&ev=PageView&noscript=1"/>
    </noscript>
    <?php
}

Teaching Note: La funzione generateEventId() crea un ID univoco (timestamp + stringa random). Questo ID viene inviato sia a Meta Pixel (eventID) che al dataLayer (fb_event_id). Il Server Container leggerà questo ID e lo userà per CAPI, garantendo che Meta riconosca i due eventi come identici.

6.2 Modifica Tag GA4 per Passare Event ID

Nel GTM Web Container, modifica il tag GA4:

Invece di usare il tag GA4 Configuration standard, usa un tag HTML personalizzato:

Tag → Nuovo → HTML personalizzato
Nome: GA4 with Event ID to Server
HTML:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  
  // Leggi Event ID dal dataLayer
  var fbEventId = null;
  for (var i = dataLayer.length - 1; i >= 0; i--) {
    if (dataLayer[i].fb_event_id) {
      fbEventId = dataLayer[i].fb_event_id;
      break;
    }
  }
  
  // Configura GA4 con Server Container URL
  gtag('config', 'G-XXXXXXXXX', {
    'server_container_url': 'https://www.tuo-dominio.com/gtm',
    'transport_url': 'https://www.tuo-dominio.com/gtm'
  });
  
  // Invia evento page_view con Event ID
  if (fbEventId) {
    gtag('event', 'page_view', {
      'event_id': fbEventId
    });
  }
</script>

Trigger: All Pages
Salva e Pubblica

Teaching Note: Questo codice legge l’fb_event_id dal dataLayer (che il Meta Pixel ha inserito) e lo include nell’evento page_view come parametro event_id. Quando l’evento arriva al Server Container, conterrà l’Event ID. Il Problema da Risolvere:
Hai due sistemi che devono tracciare lo stesso evento:

Meta Pixel (nel browser) → genera un Event ID e lo traccia
Meta CAPI (nel server) → deve usare lo stesso Event ID

Per far sì che Meta deduplichi correttamente, entrambi devono avere l’identico Event ID. Il problema è: come lo passiamo dal browser al server?

La Soluzione: Usare GA4 come “Trasportatore”
GA4 ha già un meccanismo per inviare eventi dal browser al Server Container. Possiamo “cavalcare” questo flusso per trasportare anche l’Event ID di Meta.
Il Flusso Completo

Meta Pixel genera Event ID
↓
Meta Pixel lo mette nel dataLayer
↓
GA4 legge dal dataLayer
↓
GA4 invia evento al Server Container (con Event ID incluso)
↓
Server Container riceve evento con Event ID
↓
Tag Meta CAPI legge Event ID e lo usa per inviare a Meta

6.3 Configura Variabile Event ID nel Server Container

Nel GTM Server Container:

Variabili → Nuova
Nome: FB Event ID
Tipo: Dati evento (Event Data)
Nome chiave: event_id
Salva

Teaching Note: Questa variabile legge il parametro event_id dagli eventi che arrivano al Server Container. Verrà usata dal tag Meta CAPI.

6.4 Aggiungi Event ID al Tag Meta CAPI

Nel tag Meta CAPI – All Events:

Cerca il campo “Custom Item Id Key” o “Event ID”
Inserisci: {{FB Event ID}} (la variabile appena creata)
Salva e Pubblica

Teaching Note: Ora quando il tag Meta CAPI invia eventi a Meta, include lo stesso Event ID che il browser ha usato. Meta riconosce i due eventi come identici e li deduplica automaticamente.

6.5 Filtra Eventi Senza Event ID

Nel GTM Server Container, modifica il trigger del tag Meta CAPI:

Vai sul tag Meta CAPI – All Events
Clicca sul trigger
Questo attivatore si attiva su: Seleziona “Alcuni eventi personalizzati”
Condizione: {{FB Event ID}} – non è uguale a – undefined
Salva

Teaching Note: Questo filtro impedisce al tag di attivarsi quando non c’è un Event ID. Eventi automatici di GA4 (come user_engagement) non hanno Event ID, e inviandoli a Meta senza ID potrebbero creare duplicati. Con questo filtro, solo eventi con Event ID vengono inviati a Meta CAPI.

7. Test e Verifica

Teaching Note

Il testing è fondamentale per assicurarsi che il dual tracking funzioni correttamente e che gli eventi siano dedupplicati.

7.1 Verifica Network Tab del Browser

Apri il sito in Chrome/Firefox
DevTools → Network
Filtra per “gtm”
Ricarica la pagina
Cerca richieste tipo collect?v=2&tid=G-...
Verifica URL: Deve iniziare con https://www.tuo-dominio.com/gtm/g/collect (non google-analytics.com)

Teaching Note: Se l’URL contiene il tuo dominio + /gtm, significa che gli eventi stanno passando per il Server Container. Se vedi google-analytics.com, la configurazione del Server Container URL non è corretta.

7.2 Verifica Log Docker

sudo docker logs gtm-server --tail 50

Cosa cercare:

Log con parametri GA4: a_ccd_em_page_view, event_name=page_view
Log con tag Meta: tag_custom~facebook o simile
Nessun errore 400/500

Teaching Note: I log Docker mostrano cosa il Server Container sta ricevendo e processando. Se vedi eventi GA4 e riferimenti a Facebook/Meta, significa che il server sta funzionando correttamente.

7.3 Verifica Meta Events Manager – Dual Tracking

Vai su https://business.facebook.com/events_manager2
Seleziona il tuo Pixel
Test degli eventi → Inserisci il Test Event Code se configurato
Ricarica il sito
Dovresti vedere eventi PageView:
- Uno con badge “Browser”
- Uno con badge “Server”
- Entrambi con lo stesso Event ID (es. evt_1759386544586)

Teaching Note: Vedere due eventi (Browser e Server) con lo stesso Event ID conferma che:

Il Pixel browser funziona
Il Server Container sta ricevendo eventi
Meta CAPI sta inviando eventi
La deduplicazione è configurata correttamente (stesso Event ID)

Meta deduplicherà automaticamente questi eventi nei report.

7.4 Test Console Browser

// Nella console del browser
dataLayer

Cerca un oggetto con fb_event_id. Dovrebbe apparire qualcosa come:

{
  fb_event_id: "evt_1759386544586_abc123xyz"
}

Teaching Note: Questo conferma che l’Event ID viene generato correttamente e inserito nel dataLayer, pronto per essere letto da GTM.

7.5 Verifica Event Match Quality (EMQ)

In Meta Events Manager:

Pixel → Settings → Conversions API
Controlla Event Match Quality score
Dovresti vedere almeno:
- IP Address ✓
- User Agent ✓
- Event ID ✓

Teaching Note: EMQ misura la qualità dei dati inviati a Meta. Più parametri invii (email, phone, fbp cookie, ecc.), migliore è l’EMQ. Un EMQ alto migliora le performance delle campagne pubblicitarie perché Meta può fare matching migliore con gli utenti.

🎯 Checklist Finale

[ ] Docker container GTM attivo (docker ps)
[ ] Nginx proxy /gtm configurato
[ ] GTM Web Container installato nel child theme
[ ] Tag GA4 con server_container_url configurato
[ ] GTM Server Container con Client e Tag Meta CAPI
[ ] Meta Pixel nel child theme con Event ID
[ ] Variabile FB Event ID nel Server Container
[ ] Tag Meta CAPI usa {{FB Event ID}}
[ ] Trigger Meta CAPI filtrato per Event ID esistente
[ ] Test: URL nel Network tab contiene il tuo dominio + /gtm
[ ] Test: Log Docker mostrano eventi GA4 e Meta
[ ] Test: Meta Events Manager mostra eventi Browser + Server
[ ] Test: Event ID identico in entrambi gli eventi Meta
[ ] EMQ score visibile in Meta Events Manager

📝 Note Importanti

Deduplicazione

Meta deduplica automaticamente eventi con lo stesso Event ID entro una finestra temporale di 48 ore. L’Event ID deve essere identico tra browser e server.

Test Mode

Usa il Test Event Code in Meta Events Manager per debugging senza contaminare i dati di produzione. Rimuovilo dal tag Meta CAPI prima di andare live.

Performance

Il tracking server-side aggiunge ~50-100ms di latenza rispetto al tracking solo browser, ma garantisce affidabilità anche con ad-blockers attivi.

Privacy

Server-side tracking permette di controllare meglio quali dati inviare a Meta. Puoi filtrare PII (Personally Identifiable Information) prima dell’invio.

Costi

GTM Server-Side self-hosted (Docker) è gratuito eccetto i costi del server. Google Cloud Run (alternativa) ha costi basati sull’uso (~$5-20/mese per siti medi).

Manutenzione

Aggiorna l’immagine Docker periodicamente: docker pull gcr.io/cloud-tagging-10302018/gtm-server-side:latest
Monitora log Docker per errori
Verifica Event Match Quality mensile in Meta
Rinnova Meta Access Token se necessario (scade dopo 60 giorni di default)

🆘 Troubleshooting

Eventi non appaiono in Meta Events Manager

Problema: Eventi browser visibili, ma nessun evento server.

Soluzioni:

Verifica log Docker: sudo docker logs gtm-server -f
Controlla che Nginx proxy funzioni: curl -I https://www.tuo-dominio.com/gtm/
Verifica Access Token Meta in GTM Server Container
Controlla che il trigger del tag Meta CAPI sia corretto

Event ID non coincide tra Browser e Server

Problema: Eventi duplicati in Meta perché Event ID diversi.

Soluzioni:

Verifica che fb_event_id sia nel dataLayer (console browser)
Controlla che la variabile FB Event ID nel Server Container legga event_id (non fb_event_id)
Verifica che il tag GA4 invii il parametro event_id negli eventi
Controlla log per verificare che l’Event ID arrivi al server

Bad Gateway o 502 Error

Problema: Nginx non riesce a comunicare con il container Docker.

Soluzioni:

Verifica che il container sia attivo: sudo docker ps
Verifica che la porta 8080 sia esposta: sudo netstat -tlnp | grep 8080
Riavvia il container: sudo docker restart gtm-server
Controlla log Docker per errori

Eventi GA4 non arrivano al Server Container

Problema: Log Docker vuoti, nessun evento ricevuto.

Soluzioni:

Verifica Network tab browser – URL deve contenere /gtm
Controlla che server_container_url e transport_url siano corretti nel tag GA4
Verifica che il Client “GTM Web Container” sia configurato nel Server Container
Pubblica il Web Container se hai fatto modifiche

Documento creato: 2025-10-10
Autore: Alessandro Caprai
Versione: 2.0

Alessandro Caprai

Mi chiamo Alessandro Caprai, sono un formatore appassionato di temi legati all'Intelligenza Artificiale, al Web Marketing e alla Produttività.