Przejdź do treści

Integracja WP Pixel z Shoper

Uwaga

Wtyczka nie posiada obecnie aktywnego wsparcia.
W przypadku błędów zalecamy integrację przez Google Tag Manager lub ręczne dodanie kodów WP Pixel bezpośrednio do strony.

Krok 1: Przejdź do integracji własnych

  1. Zaloguj się do panelu administracyjnego sklepu Shoper.
  2. Przejdź do: Dodatki i integracje → Integracje własne

Krok 2: Dodaj kod w nagłówku strony

W polu Nagłówek strony - <head> umieść główny kod WP Pixel inicjalizujący narzędzie.
Zamień WP_PIXEL_ID na identyfikator przypisany do Twojego sklepu. 

<script>
   !function(d,m,e,v,n,t,s){d['WphTrackObject'] = n;
   d[n] = window[n] || function() {(d[n].queue=d[n].queue||[]).push(arguments)},
   d[n].l = 1 * new Date(), t=m.createElement(e), s=m.getElementsByTagName(e)[0],
   t.async=1;t.src=v;s.parentNode.insertBefore(t,s)}(window,document,'script','https://pixel.wp.pl/w/tr.js', 'wph');
   wph('init', 'WP_PIXEL_ID');
</script>

Krok 3: Dodaj kody zdarzeń w stopce

W polu Stopka strony, przed zamknięciem </body> umieść odpowiednie skrypty śledzące, takie jak:

  • View - śledzenie odsłon strony 
    <script>
    // View
    wph('track', 'ViewContent', { 'content_name': 'View' })
</script>
  • ProductList - śledzenie listy produktów 
    <script>
    // ProductList
    var url = document.getElementsByTagName('body')[0].getAttribute('class');
    if(url.includes('shop_product_list')){
    var contents = [
        {products}{
            id: '{products.product_id}',
            name: '{products.name}',
            category: '{products.category}',
            price: Number(({products.float_promo_price}).toFixed(2)) },{/products}
        ]
    if(contents.length == 0){
        var contents = undefined
    }
    wph('track', 'ViewContent', {
        'content_name': 'ProductList',
        contents: contents
    })
    }
</script>
  • ViewProduct - śledzenie podglądu produktu 
    <script>
    // ViewProduct
    var wph_ps = function() {
        var url = document.getElementsByTagName('body')[0].getAttribute('class');
        if (url.includes('shop_product')) {
            var id_p = '{product_id}';
            var name = '{name}';
            var price = '{float_promo_price}';

            frontAPI.getProduct(function(p) {

                var category = p.category.name;

                // do stuff
                wph('track', 'ViewContent', {
                    'content_name': 'ViewProduct',
                    contents: [{
                        id: id_p,
                        name: name,
                        price: Number(Number(price).toFixed(2)),
                        category: category,
                        quantity: 1
                    }]
                })
                // end stuff
            }, {
                id: id_p
            });
        };
    };
    if (window.frontAPI) wph_ps();
    else document.addEventListener("frontAPIReady", wph_ps, false);
</script>

  • AddToCart - śledzenie dodania do koszyka
    Wersja kodu jeśli po dodaniu do koszyka strona odświeża się (i ewentualnie następuje przekierowanie na stronę koszyka): 

    <script>
    // AddToCart
    var wph_atc = function() {
        var button = document.getElementsByClassName('alert-success alert')[0];
        if (button != undefined) {
            if (button.querySelector('div').innerText == "Produkt dodany do koszyka.") {
                frontAPI.getBasketInfo(function(p) {
                    var product = p.products[p.products.length -
                        1];
                    wph('track', 'AddToCart', {
                        contents: [{
                            "id": product.product_id.toString(),
                            "name": product.name,
                            "price": Number(product.price_float.toFixed(2)),
                            "quantity": product.quantity,
                            "category": product.category.translation.name
                        }]
                    });
                });
            };
        };
    };
    if (window.frontAPI) wph_atc();
    else document.addEventListener("frontAPIReady", wph_atc, false);
</script>

  • AddToCart - śledzenie dodania do koszyka
    Wersja kodu jeśli strona się nie odświeża i wyświetla komunikat potwierdzenia 

    <script>
    // AddToCart
    var wph_atc = function() {
        var button = document.getElementsByClassName('alert-success alert')[0];
        if (button != undefined) {
            if (button.querySelector('div').innerText == "Produkt dodany do koszyka.") {
                frontAPI.getBasketInfo(function(p) {
                    var product = p.products[p.products.length -
                        1];
                    wph('track', 'AddToCart', {
                        contents: [{
                            "id": product.product_id.toString(),
                            "name": product.name,
                            "price": Number(product.price_float.toFixed(2)),
                            "quantity": product.quantity,
                            "category": product.category.translation.name
                        }]
                    });
                });
            };
        };
    };
    if (window.frontAPI) wph_atc();
    else document.addEventListener("frontAPIReady", wph_atc, false);
</script>

  • Purchase - potwierdzenie złożenia zamówienia 
    <script>
    var contents = [
        {products}{
            id: '{products.product_id}',
            name: '{products.name}',
            category: '{products.category}',
            quantity: {products.quantity},
            price: Number(({products.float_price}).toFixed(2)) },{/products}
        ];
    if('{discount_code}' == ""){
        var discount_code = undefined
    } else {
        var discount_code = '{discount_code}'
    }
    wph('track', 'Purchase', {
        transaction_id: '{order_id}',
        value_gross: Number(({float_sum_noship}).toFixed(2)),
        value: Number(({float_sum_noship}-{float_tax_noship}).toFixed(2)),
        shipping_cost: Number(({float_shipping_cost}).toFixed(2)),
        discount_code: discount_code,
        contents: contents
    });
</script>

Gotowe!

Integracja WP Pixel została zakończona pomyślnie 🎉
W razie trudności technicznych możesz skorzystać z integracji przez GTM lub poprosić o wsparcie swojego dewelopera.