Chi Siamo Area Clienti Promo del Mese Dicono di Noi Portfolio FAQ Blog
Contattaci
Senza categoria

WPCode: Conversion Tracking, A/B Test e Snippet Avanzati

· 11 min di lettura

Oltre gli Snippet Base: Funzionalità Avanzate di WPCode

Se hai seguito gli articoli precedenti di questa serie, conosci già le funzionalità fondamentali di WPCode: inserimento di codice nell’header e nel footer, creazione di snippet personalizzati, logica condizionale e protezione dagli errori. Ma WPCode offre anche funzionalità avanzate pensate per i professionisti del marketing digitale e gli sviluppatori esperti.

In questo articolo esploreremo tre aree avanzate: il conversion tracking integrato, le possibilità di A/B testing e gli snippet avanzati per casi d’uso professionali. Queste funzionalità sono particolarmente utili per chi gestisce campagne pubblicitarie, e-commerce e siti con requisiti di personalizzazione complessi.

Conversion Tracking con WPCode Pro

Il conversion tracking (tracciamento delle conversioni) è il processo di monitoraggio delle azioni che gli utenti compiono sul tuo sito dopo aver interagito con le tue campagne pubblicitarie. WPCode Pro include un sistema di conversion tracking integrato che semplifica enormemente la configurazione rispetto all’implementazione manuale.

Cos’è una Conversione

Una conversione è qualsiasi azione significativa che un utente compie sul tuo sito:

Piattaforme Supportate

WPCode Pro supporta il tracciamento delle conversioni per le principali piattaforme pubblicitarie:

Configurazione del conversion tracking in WPCode Pro

Come Funziona il Conversion Tracking Automatico

Nella versione gratuita di WPCode, devi configurare manualmente ogni evento di conversione creando snippet specifici con la logica condizionale appropriata. La versione Pro automatizza questo processo:

  1. Inserisci il tuo Pixel ID (Facebook, Pinterest, TikTok) o Measurement ID (GA4) nelle impostazioni di WPCode
  2. WPCode rileva automaticamente le pagine chiave (prodotto, carrello, checkout, conferma ordine)
  3. Gli eventi di conversione vengono attivati automaticamente nelle posizioni corrette
  4. I dati del prodotto (nome, prezzo, categoria) vengono passati automaticamente agli eventi

Questo approccio elimina la necessità di creare decine di snippet separati e riduce il rischio di errori di configurazione che possono falsare i dati di tracciamento.

Implementazione Manuale del Conversion Tracking (Versione Free)

Se usi la versione gratuita, puoi implementare il conversion tracking manualmente con snippet personalizzati. Ecco un esempio per tracciare le conversioni di acquisto WooCommerce con il Facebook Pixel:

add_action( woocommerce_thankyou, function( $order_id ) {
    $order = wc_get_order( $order_id );
    if ( ! $order ) return;

    $total = $order->get_total();
    $currency = $order->get_currency();
    $items = $order->get_items();

    $content_ids = array();
    $contents = array();

    foreach ( $items as $item ) {
        $product = $item->get_product();
        $content_ids[] = $product->get_id();
        $contents[] = array(
            id => $product->get_id(),
            quantity => $item->get_quantity(),
        );
    }

    echo "<script>
    fbq(track, Purchase, {
        value: " . $total . ",
        currency: " . $currency . ",
        content_ids: " . json_encode( $content_ids ) . ",
        content_type: product,
        contents: " . json_encode( $contents ) . "
    });
    </script>";
});

Questo snippet va creato come PHP Snippet in WPCode con inserimento Auto Insert → Run Everywhere. L’hook woocommerce_thankyou viene eseguito solo sulla pagina di conferma ordine, quindi non servono condizioni aggiuntive.

A/B Testing con WPCode

L’A/B testing è una metodologia che confronta due versioni di un elemento per determinare quale performa meglio. Anche se WPCode non include un sistema di A/B testing nativo come piattaforme dedicate (Google Optimize, VWO), puoi implementare test semplici ed efficaci usando gli snippet.

A/B Testing con CSS e JavaScript

Ecco un approccio semplice per testare due versioni di un CTA (Call to Action) dividendo il traffico al 50%:

document.addEventListener(DOMContentLoaded, function() {
    var ctaButton = document.querySelector(.main-cta);
    if (!ctaButton) return;

    // Controlla se l’utente ha già una variante assegnata
    var variant = localStorage.getItem(cta_test_variant);

    if (!variant) {
        // Assegna casualmente una variante
        variant = Math.random() < 0.5 ? A : B;
        localStorage.setItem(cta_test_variant, variant);
    }

    if (variant === B) {
        // Variante B: testo e colore diversi
        ctaButton.textContent = Inizia Ora - È Gratis;
        ctaButton.style.backgroundColor = #e94560;
        ctaButton.style.borderColor = #e94560;
    }

    // Traccia la variante visualizzata
    if (typeof gtag === function) {
        gtag(event, ab_test_view, {
            test_name: cta_button,
            variant: variant
        });
    }

    // Traccia il click sulla CTA
    ctaButton.addEventListener(click, function() {
        if (typeof gtag === function) {
            gtag(event, ab_test_click, {
                test_name: cta_button,
                variant: variant
            });
        }
    });
});

Questo script divide i visitatori in due gruppi (50/50), mostra versioni diverse del pulsante CTA e invia eventi a Google Analytics per misurare quale variante genera più click.

Configurazione degli header per A/B testing e conversion tracking

A/B Testing di Interi Blocchi di Contenuto

Puoi anche testare blocchi di contenuto diversi, ad esempio due versioni di una hero section:

document.addEventListener(DOMContentLoaded, function() {
    var heroSection = document.querySelector(.hero-section);
    if (!heroSection) return;

    var variant = localStorage.getItem(hero_test) || (Math.random() < 0.5 ? A : B);
    localStorage.setItem(hero_test, variant);

    if (variant === B) {
        heroSection.querySelector(h1).textContent = Trasforma il Tuo Business con la Tecnologia;
        heroSection.querySelector(.hero-subtitle).textContent = Soluzioni digitali su misura per la tua azienda;
    }
});

Misurare i Risultati

Per misurare i risultati dei tuoi A/B test, hai diverse opzioni:

In Google Analytics, puoi poi creare un report personalizzato che confronta le metriche (click, conversioni, bounce rate) tra le due varianti per determinare il vincitore.

Snippet Avanzati: Casi d’Uso Professionali

Snippet 1: Popup di Uscita (Exit Intent)

Un popup che appare quando l’utente sta per lasciare il sito, rilevando il movimento del mouse verso la barra degli indirizzi:

document.addEventListener(DOMContentLoaded, function() {
    var shown = sessionStorage.getItem(exit_popup_shown);
    if (shown) return;

    document.addEventListener(mouseout, function(e) {
        if (e.clientY < 10 && !shown) {
            shown = true;
            sessionStorage.setItem(exit_popup_shown, true);

            var overlay = document.createElement(div);
            overlay.id = exit-popup-overlay;
            overlay.style.cssText = position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:99999;display:flex;align-items:center;justify-content:center;;

            var popup = document.createElement(div);
            popup.style.cssText = background:#fff;padding:40px;border-radius:12px;max-width:500px;text-align:center;position:relative;;
            popup.innerHTML = <button onclick="document.getElementById(exit-popup-overlay).remove()" style="position:absolute;top:10px;right:15px;border:none;background:none;font-size:24px;cursor:pointer;">&times;</button> +
                <h2>Aspetta! Non andare via...</h2> +
                <p>Iscriviti alla newsletter e ricevi uno sconto del 10% sul primo ordine!</p> +
                <input type="email" placeholder="La tua email" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:6px;margin:10px 0;"> +
                <button style="width:100%;padding:12px;background:#0073aa;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:16px;">Ottieni lo Sconto</button>;

            overlay.appendChild(popup);
            document.body.appendChild(overlay);

            overlay.addEventListener(click, function(e) {
                if (e.target === overlay) overlay.remove();
            });
        }
    });
});

Snippet 2: Lazy Loading Personalizzato

Un sistema di lazy loading per elementi personalizzati (non immagini, che WordPress gestisce già):

document.addEventListener(DOMContentLoaded, function() {
    var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                var el = entry.target;
                if (el.dataset.src) {
                    el.src = el.dataset.src;
                    el.removeAttribute(data-src);
                }
                if (el.dataset.bgImage) {
                    el.style.backgroundImage = url( + el.dataset.bgImage + );
                    el.removeAttribute(data-bg-image);
                }
                el.classList.add(loaded);
                observer.unobserve(el);
            }
        });
    }, {
        rootMargin: 200px
    });

    document.querySelectorAll([data-src], [data-bg-image]).forEach(function(el) {
        observer.observe(el);
    });
});

Snippet 3: Notifica Stock Basso WooCommerce

Mostra un messaggio di urgenza quando un prodotto ha poche unità in magazzino:

add_action( woocommerce_single_product_summary, function() {
    global $product;

    if ( $product->is_type( simple ) && $product->managing_stock() ) {
        $stock = $product->get_stock_quantity();

        if ( $stock > 0 && $stock <= 5 ) {
            echo <div style="background:#fff3cd; border:1px solid #ffc107; border-radius:6px; padding:10px 15px; margin:10px 0; display:flex; align-items:center; gap:8px;">;
            echo <span style="font-size:20px;">&#9888;</span>;
            echo <span style="color:#856404;"><strong>Affrettati!</strong> Solo  . $stock .  disponibil . ( $stock === 1 ? e : i ) .  in magazzino.</span>;
            echo </div>;
        }
    }
}, 25 );

Snippet avanzati per WooCommerce e conversion tracking

Snippet 4: Dynamic Pricing Display

Mostra quanto l’utente risparmia rispetto al prezzo originale:

add_action( woocommerce_single_product_summary, function() {
    global $product;

    if ( $product->is_on_sale() ) {
        $regular = (float) $product->get_regular_price();
        $sale = (float) $product->get_sale_price();

        if ( $regular > 0 && $sale > 0 ) {
            $saved = $regular - $sale;
            $percentage = round( ( $saved / $regular ) * 100 );

            echo <div style="background:#d4edda; border:1px solid #28a745; border-radius:6px; padding:10px 15px; margin:10px 0;">;
            echo <span style="color:#155724;"><strong>Risparmi &euro; . number_format( $saved, 2, ,, . ) .  (- . $percentage . %)</strong></span>;
            echo </div>;
        }
    }
}, 11 );

Snippet 5: Cookie Consent con Blocco Script

Un sistema basilare di gestione del consenso cookie che blocca gli script di tracciamento fino al consenso dell’utente:

// Controlla se il consenso è stato dato
add_action( wp_head, function() {
    echo "<script>
    window.cookieConsentGiven = document.cookie.indexOf(cookie_consent=accepted) !== -1;
    </script>";
}, 1 );

// Mostra il banner solo se non c’è consenso
add_action( wp_footer, function() {
    if ( isset( $_COOKIE[cookie_consent] ) ) return;

    echo <div id="cookie-banner" style="position:fixed;bottom:0;left:0;right:0;background:#1a1a2e;color:#fff;padding:20px;z-index:99999;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;">;
    echo <p style="margin:0;flex:1;">Questo sito utilizza cookie tecnici e di profilazione. <a href="/privacy-policy" style="color:#00d4ff;">Scopri di pi&ugrave;</a></p>;
    echo <div>;
    echo <button onclick="acceptCookies()" style="background:#00d4ff;color:#000;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:bold;margin-right:10px;">Accetta tutti</button>;
    echo <button onclick="rejectCookies()" style="background:transparent;color:#fff;border:1px solid #fff;padding:10px 20px;border-radius:6px;cursor:pointer;">Solo necessari</button>;
    echo </div></div>;

    echo "<script>
    function acceptCookies() {
        document.cookie = cookie_consent=accepted;path=/;max-age=31536000;
        document.getElementById(cookie-banner).remove();
        location.reload();
    }
    function rejectCookies() {
        document.cookie = cookie_consent=rejected;path=/;max-age=31536000;
        document.getElementById(cookie-banner).remove();
    }
    </script>";
});

Nota: questo è un sistema di base. Per una conformità GDPR completa, considera l’uso di plugin dedicati come CookieYes, Complianz o Iubenda che offrono gestione granulare delle categorie di cookie, registro dei consensi e aggiornamento automatico della policy.

Integrazione con Strumenti di Marketing

WPCode si integra bene con diversi strumenti di marketing grazie alla sua flessibilità nell’inserimento di codice. Ecco alcuni scenari di integrazione avanzata:

Conclusioni

Le funzionalità avanzate di WPCode — dal conversion tracking integrato alle possibilità di A/B testing e agli snippet professionali — trasformano il plugin da un semplice gestore di codice a uno strumento di marketing e sviluppo completo. Che tu stia ottimizzando le conversioni di un e-commerce, testando varianti di contenuto o implementando personalizzazioni complesse, WPCode ti dà gli strumenti per farlo in modo sicuro e gestibile.

Ricorda: le funzionalità avanzate richiedono una comprensione solida delle basi. Se non hai ancora familiarità con le funzionalità fondamentali di WPCode, ti consigliamo di partire dai primi articoli di questa serie prima di avventurarti nelle personalizzazioni avanzate.

📚 Leggi anche gli altri articoli della serie WPCode

Hai bisogno di implementare conversion tracking avanzato o A/B testing sul tuo sito? Contatta il team di G Tech Group. I nostri specialisti in Google Ads e marketing digitale possono configurare un sistema di tracciamento completo e progettare test efficaci per massimizzare le performance del tuo sito.

Migliora il Tuo Sito WordPress

Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:

#A/B Test #Avanzati #Conversion Tracking #Wordpress #WPCode