Integracja WP Pixel z sklepyWWW.pl

Uwaga

Wtyczka nie posiada obecnie aktywnego wsparcia.
W przypadku błędów zalecamy integrację przez Google Tag Manager lub ręczne wpięcie kodów na stronie.

Krok 1: Inicjalizacja WP Pixel w `<head>`

Ścieżka: Narzędzia > Narzędzia Webmastera > Dodatkowy kod javascript w sekcji HEAD sklepywww1

Otwórz to narzędzie w panelu.
Wklej tu kod inicjalizujący WP Pixel (zamień WP-PIXEL-ID na swoje ID sklepu).

<!-- KOD WP PIXEL: INIT -->
<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>
<!-- KONIEC KODU WP PIXEL: INIT -->

Krok 2: ViewProduct na karcie produktu

Ścieżka: Narzędzia > Narzędzia Webmastera > Dodatkowy kod na karcie produktu sklepywww2

Otwórz to narzędzie w panelu.
Wklej tu skrypt śledzący „ViewProduct” (dostosowany do Twoich zmiennych).

<!-- KOD WP PIXEL: VIEWPRODUCT -->
<script>
function whenAvailable(name, callback) {
    var interval = 10; // ms
    window.setTimeout(function() {
        if (window[name]) {
            callback(window[name]);
        } else {
            whenAvailable(name, callback);
        }
    }, interval);
}

function test(object, value) {
    return Object.keys(object).find(key => object[key] === value);
}

function flattenObj(obj){
let flat = {}
    for(let i in obj){
       if(typeof obj[i] == 'object'){
          let flatObj = flattenObj(obj[i])
          for(let x in flatObj){
              flat[i + "." + x] = flatObj[x]
          }
      } else {
       flat[i] = obj[i]
      }
   }
return flat
}

whenAvailable("get_products_data", function(t) {
flat_categories = flattenObj(categories)

wph('track', 'ViewContent', {
    'content_name': 'ViewProduct',
    contents: [{
        id: '#PRODUCT_ID#',
        name: '#PRODUCT_NAME#',
        price: Number(Number(get_products_data(#PRODUCT_ID#).price_special).toFixed(2)),
        category: test(flat_categories, Number(get_products_data('#PRODUCT_ID#').category_id)) == undefined? undefined : flat_categories[test(flat_categories, Number(get_products_data('#PRODUCT_ID#').category_id)).split('.').slice(0,test(flat_categories, Number(get_products_data('#PRODUCT_ID#').category_id)).split('.').length-1).join('.')+".name"]
    }]
})
})
</script>
<!-- KONIEC KODU WP PIXEL: VIEWPRODUCT -->

Krok 3: View, ProductList i AddToCart w `<body>`

Ścieżka: Narzędzia > Narzędzia Webmastera > Dodatkowy kod javascript w sekcji BODY

Otwórz to narzędzie w panelu.
Wklej tu skrypty:
śledzenie odsłon (ViewContent)
śledzenie listy produktów (ProductList)
śledzenie dodania do koszyka (AddToCart)

sklepywww3

<!-- KOD WP PIXEL: VIEW, PRODUCTLIST I ADDTOCART -->
<script>
    wph('track', 'ViewContent', { 'content_name': 'View' })
</script>

<script>
add_to_basket = function(products_id, quantity, id)
{
    if(quantity == 0)
    {
        if($("#add_product_overlay").length > 0)
        {
            $("#add_product_overlay").remove();

            // przywrocenie przewijania strony
            wznowPrzewijanie();
        }
        return;
    }

    product = get_products_data(products_id);

        function test(object, value) {
    return Object.keys(object).find(key => object[key] === value);
}

function flattenObj(obj){
let flat = {}
    for(let i in obj){
       if(typeof obj[i] == 'object'){
          let flatObj = flattenObj(obj[i])
          for(let x in flatObj){
              flat[i + "." + x] = flatObj[x]
          }
      } else {
       flat[i] = obj[i]
      }
   }
return flat
}
flat_categories = flattenObj(categories)

    if (id || product_page || !product.with_options) {
        quantity = (quantity == undefined ? 1 : quantity);
        id = (id != undefined ? id : "");


                wph('track', 'AddToCart', {
                   contents: [{
                     id:  product.product_id,
                     name: product.name,
                     price: Number(Number(product.price_special).toFixed(2)),
                     category: test(flat_categories, Number(product.category_id)) == undefined? undefined : flat_categories[test(flat_categories, Number(product.category_id)).split('.').slice(0,test(flat_categories, Number(product.category_id)).split('.').length-1).join('.')+".name"],
                     quantity: quantity
                  }]
                });

        $.ajax({
            type: "POST",
            url: "rpc.php?action=add_to_basket",
            dataType: "json",
            data: "products_id="+products_id+"&quantity="+quantity+id,
            success: function(response){
                let error = true;
                let data = null;

                if (response != false) {
                    try {
                        data = JSON.parse(response);
                        error = false;
                    } catch (error) {}
                }

                if (!error) {
                    if(basket_redirect)
                        redirect_to_basket();
                    else {
                        $("#add_product_overlay").remove();
                        wznowPrzewijanie();

                        AddBasketData.construct(data, quantity, id);
                        add_to_basket_info();
                        refresh_cart();
                    }
                } else
                    alert(ERROR_ADDING_TO_CART);
            },
            error: function() {
                    alert(ERROR_ADDING_TO_CART);
            }
        });
    } else
        draw_add_product_form(product, quantity);
}
</script>

<script>
contents = []
klucze = document.querySelector("div.listing").querySelectorAll("a[data-idproduktu]")
function flattenObj(obj){
let flat = {}
    for(let i in obj){
       if(typeof obj[i] == 'object'){
          let flatObj = flattenObj(obj[i])
          for(let x in flatObj){
              flat[i + "." + x] = flatObj[x]
          }
      } else {
       flat[i] = obj[i]
      }
   }
return flat
}
function test(object, value) {
    return Object.keys(object).find(key => object[key] === value);
}
flat_categories = flattenObj(categories)



for (i = 0; i < klucze.length; i++){
id = klucze[i].getAttribute("data-idproduktu")
contents.push({id: id,
                            name: get_products_data(id).name,
                            price: Number(Number(get_products_data(id).price_special).toFixed(2)),
                            category: test(flat_categories, Number(get_products_data(id).category_id)) == undefined? undefined : flat_categories[test(flat_categories, Number(get_products_data(id).category_id)).split('.').slice(0,test(flat_categories, Number(get_products_data(id).category_id)).split('.').length-1).join('.')+".name"]
   })
}
if(contents.length > 0 & window.location.pathname.includes('-c-')){
wph('track', 'ViewContent', {
    'content_name': 'ProductList',
    contents:  contents
})
}
</script>
<!-- KONIEC KODU WP PIXEL: VIEW, PRODUCTLIST I ADDTOCART -->

Krok 4: Zdarzenie Purchase (zakończenie zamówienia)

Ścieżka: Konfiguracja > Sprzedaż > Obsługa zamówień: sklepywww4

Przy module Dowolny kod JavaScript kliknij Edytuj: sklepywww5

Otwórz edycję tego modułu.

<!-- KOD WP PIXEL: PURCHASE-->
<script>
ids = "#PRODUCTS_IDS_x#"
ids = ids.split('x')
contents = []
function whenAvailable(name, callback) {
    var interval = 10; // ms
    window.setTimeout(function() {
        if (window[name]) {
            callback(window[name]);
        } else {
            whenAvailable(name, callback);
        }
    }, interval);
}

function flattenObj(obj){
let flat = {}
    for(let i in obj){
       if(typeof obj[i] == 'object'){
          let flatObj = flattenObj(obj[i])
          for(let x in flatObj){
              flat[i + "." + x] = flatObj[x]
          }
      } else {
       flat[i] = obj[i]
      }
   }
return flat
}
function test(object, value) {
    return Object.keys(object).find(key => object[key] === value);
}

whenAvailable("categories", function(t) {
flat_categories = flattenObj(categories)

for(var i =0; i < ids.length; i++){
id = ids[i];
item = {id: id,
         name: get_products_data(id).name,
        price: Number(Number(get_products_data(id).price_special).toFixed(2)),
        category: test(flat_categories, Number(get_products_data(id).category_id)) == undefined? undefined :
flat_categories[test(flat_categories, Number(get_products_data(id).category_id)).split('.').slice(0,test(flat_categories,
Number(get_products_data(id).category_id)).split('.').length-1).join('.')+".name"]
}
contents.push(item)
}

wph('track', 'Purchase', {
transaction_id: "#ORDER_ID#",
value_gross: Number((#SUBTOTAL#).toFixed(2)),
shipping_cost: Number((#TOTAL# - #SUBTOTAL#).toFixed(2)),
contents: contents
});
})
</script>
<!-- KONIEC KODU WP PIXEL: PURCHASE -->

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.