Skip to content

WP Pixel Integration with SkyShop

Warning

The plugin currently does not have active support.
In case of errors, we recommend integration via Google Tag Manager or manual insertion of the codes on the site.

Step 1: Add the Basic WP Pixel Code

Path: Integrations → Custom JavaScript Code

  • Paste the following code into the <head> section:
<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', 'PIXEL-ID');
</script>

Step 2: Main WP Pixel Scripts

  • Paste the following code into the <body> section:
<script>
if('[CONTROLER]' == 'index'){
wph('track', 'ViewContent', { 'content_name': 'View' })
}
</script>

<script>
if('[CONTROLER]' == 'category'){
document.addEventListener('DOMContentLoaded', function(event) {
var objects = document.querySelectorAll('figure[class*="product-tile"]');
var products = [];
for(i = 0; i < objects.length; i++){
 products.push({
id: objects[i].querySelector("a[data-product-id]").getAttribute("data-product-id"),
name: objects[i].querySelector("a[title]").getAttribute("title"),
price: Number(objects[i].querySelector("span.price-special > span.core_priceFormat").getAttribute("data-price"))
})
}
wph('track', 'ViewContent', {
    'content_name': 'ProductList',
    contents: products
})
})
}
</script>

<script>
if('[CONTROLER]' == 'product'){
wph('track', 'ViewContent', {
    'content_name': 'ViewProduct',
    contents: [{
        id: '[PROD_ID]',
        name: '[PROD_NAME]',
        category: '[CAT_NAME]' == ""? undefined : '[CAT_NAME]',
        price: Number(([PROD_PRICE]).toFixed(2))
    }]
})
}
</script>

<script>
function whenAvailable(name, callback) {
    var interval = 10; // ms
    window.setTimeout(function() {
        if (window[name]) {
            callback(window[name]);
        } else {
            whenAvailable(name, callback);
        }
    }, interval);
}

whenAvailable("updateCart", function(t) {

window['updateCart'] = function(action, data, additionalData) {
    var body = $('body')
      , quickCart = $('.quick-cart')
      , quickCartProducts = quickCart.find('.products')
      , quickCartEmptyCart = quickCart.find('.cart-empty')
      , amount = quickCart.find('.core_quickCartAmount')
      , totalPrice = quickCart.find('.core_quickCartTotalPrice')
      , totalPriceBrutto = quickCart.find('.core_quickCartTotalPriceBrutto');
    switch (action) {
    case 'add':
        var productTemplate = quickCartProducts.find('.product-template')[0].outerHTML
          , existProduct = quickCartProducts.find('li[data-hash="' + data.hash + '"]');
        // WP Pixel - AddToCart - start
        wph('track', 'AddToCart', {
          contents: [{
            id: data.id,
            name: data.name,
            category: data.catName,
            price: data.price,
            quantity: data.amount
          }]
        });        
        // WP Pixel - AddToCart - end
        var productAmount = existProduct.length > 0 ? Big(existProduct.data('amount')).plus(data.amount) : data.amount;
        productTemplate = productTemplate.replace(/{{:hash:}}/g, data.hash);
        productTemplate = productTemplate.replace(/{{:amount:}}/g, productAmount);
        productTemplate = productTemplate.replace(/#{{:url:}}/g, data.url);
        productTemplate = productTemplate.replace(/{{:name:}}/g, data.name);
        productTemplate = productTemplate.replace(/{{:image:}}/g, data.img);
        productTemplate = productTemplate.replace('src="/view/new/img/transparent.png"', '');
        productTemplate = productTemplate.replace(/{{:price:}}/g, data.price);
        productTemplate = productTemplate.replace(/{{:tax:}}/g, data.tax);
        productTemplate = productTemplate.replace(/data-src/g, 'src');
        productTemplate = productTemplate.replace(/data-price-type-placeholder/g, 'data-price-type');
        productTemplate = $(productTemplate);
        productTemplate.removeClass('hidden');
        if (existProduct.length > 0) {
            existProduct.before(productTemplate);
            existProduct.remove()
        } else {
            quickCartProducts.append(productTemplate);
            quickCartProducts.removeClass('hidden');
            quickCartEmptyCart.addClass('hidden')
        }
        amount.text(data.amount_total);
        if (body.attr('data-hurt-price-type') == 'netto_brutto' || body.attr('data-hurt-price-type') == 'netto') {
            totalPrice.text(data.sum_net);
            totalPrice.data('price', data.sum_net);
            totalPriceBrutto.text(data.sum);
            totalPriceBrutto.data('price', data.sum)
        } else {
            totalPrice.text(data.sum);
            totalPrice.data('price', data.sum)
        }
        pricesFormatter(quickCart);
        break;
    case 'remove':
        var currentProduct = quickCartProducts.find('li[data-hash="' + additionalData.hash + '"]');
        currentProduct.transition('slideUp', 100, function() {
            currentProduct.remove();
            quickCartProducts.each(function() {
                if (typeof $(this).children('li')[1] === 'undefined') {
                    amount.text(0);
                    totalPrice.text(0);
                    totalPrice.data('price', 0);
                    totalPriceBrutto.text(0);
                    totalPriceBrutto.data('price', 0);
                    quickCartProducts.transition('slideUp', 25, function() {
                        quickCartProducts.css('display', 'block');
                        quickCartProducts.addClass('hidden');
                        quickCartEmptyCart.removeClass('hidden')
                    })
                } else {
                    amount.text(data.amount_total);
                    if (body.attr('data-hurt-price-type') == 'netto_brutto' || body.attr('data-hurt-price-type') == 'netto') {
                        totalPrice.text(data.sum_net);
                        totalPrice.data('price', data.sum_net);
                        totalPriceBrutto.text(data.sum);
                        totalPriceBrutto.data('price', data.sum)
                    } else {
                        totalPrice.text(data.sum);
                        totalPrice.data('price', data.sum)
                    }
                }
            });
            pricesFormatter(quickCart)
        });
        if (additionalData.inCart === !0) {
            var cart = $('.cart')
              , cartTable = cart.find('.cart-table')
              , cartTr = cartTable.find('tr[data-hash="' + additionalData.hash + '"]')
              , cartTrAmount = parseFloat(cartTr.find('.core_storeCartProductAmount').val())
              , cartEmpty = cartTable.prev();
            amount.text(Big(parseFloat(amount.eq(0).text())).minus(cartTrAmount));
            if (body.attr('data-hurt-price-type') == 'netto_brutto' || body.attr('data-hurt-price-type') == 'netto') {
                totalPrice.text(data.sum_net);
                totalPrice.data('price', data.sum_net);
                totalPriceBrutto.text(data.sum);
                totalPriceBrutto.data('price', data.sum)
            } else {
                totalPrice.text(data.sum);
                totalPrice.data('price', data.sum)
            }
            pricesFormatter(quickCart);
            cartTr.children('td').wrapInner('<div style="display:block;" />').parent().find('td > div').transition('slideUp', 100, function() {
                cartTr.remove();
                delete SkyShop.cart.products[additionalData.hash];
                if (typeof additionalData.callback !== 'undefined') {
                    additionalData.callback()
                }
                if (cartTable.find('tr[data-hash]:not(.hidden)').length == 0) {
                    cart.find('tbody').addClass('empty-space');
                    setTimeout(function() {
                        cartEmpty.removeClass('hidden')
                    }, 200)
                }
            })
        }
        break
    }
}

});
</script>

Step 3: Order Summary Scripts

  • Paste the following code into the order completion (conversion) section:
<script>
var products = JSON.parse('[PRODUCTS]');
console.log(products);
var contents = [];
var arr1 = [];
var arr2 = [];
for(var i = 0; i < (Object.keys(products)).length; i++){
 arr1.push(products[Object.keys(products)[i]].op_price);
 arr2.push(products[Object.keys(products)[i]].op_amount);
 contents.push({
id: products[Object.keys(products)[i]].op_prod_id,
name: products[Object.keys(products)[i]].op_prod_name,
price: products[Object.keys(products)[i]].op_price,
quantity: products[Object.keys(products)[i]].op_amount,
})
}
var value_gross = arr1.reduce(function(r,a,i){return r+a*arr2[i]},0);
var shipping_cost = Number((Number('[PRICE]')-value_gross).toFixed(2));
var value = Number((Number('[PRICE_NET]') - shipping_cost/1.23).toFixed(2));
wph('track', 'Purchase', {
    transaction_id: '[ORDER_ID]',
    value: Number('[PRICE_NET]') ,
    value_gross: value_gross,
    shipping_cost: shipping_cost,
    contents:contents
});
</script>

Done!

The WP Pixel integration has been successfully completed 🎉 If you encounter technical difficulties, consider using GTM integration or ask your developer for support.