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(w,p,e,v,n,t,s){w['WphTrackObject'] = n;
    w[n] = window[n] || function() {(w[n].queue=w[n].queue||[]).push(arguments)},
    w[n].l = 1 * new Date(), w[n].v = '2.0', t=p.createElement(e), s=p.getElementsByTagName(e)[0],
    t.async=1;t.src=v;s.parentNode.insertBefore(t,s)}(window,document,'script',
    'https://pixel.wp.pl/w/PIXEL_ID/tr.js', 'wph');
    wph('init', 'PIXEL_ID');
    wph('go');
</script>

Important!

Remember to replace the PIXEL_ID with your own Pixel ID!

The website administrator is responsible for properly embedding the WP Pixel tracking script, i.e., after the user has given consent.

The script should be embedded in its entirety, and calling the wph('go') function within it signifies the user's consent to tracking.

Withdrawing user consent should result in calling the wph('stop') function.

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.

Warning

The Plugin is provided “AS IS”, WITHOUT ANY WARRANTIES, either express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, proper functioning, compatibility with external platforms (such as Shopify, WooCommerce, PrestaShop, or other e-commerce systems), or compatibility with other plugins. Wirtualna Polska Media S.A. does not warrant that the Plugin will be error-free, operate without interruption, or meet the User’s expectations.

TO THE MAXIMUM EXTENT PERMITTED BY LAW, WIRTUALNA POLSKA MEDIA S.A. DISCLAIMS ALL LIABILITY for any damages arising from the use of or inability to use the Plugin, including indirect, consequential, or incidental damages, loss of profits, data, or business interruption, regardless of the legal basis of the claim.

Wirtualna Polska Media S.A. may, but is not obligated to, update the Plugin. The company shall not be liable for any issues resulting from updates, changes to APIs or infrastructures of external platforms (e.g., Shopify, WooCommerce, PrestaShop, or other e-commerce systems), or interactions with other software. The User is responsible for testing the Plugin before production use and bears sole responsibility for maintaining compatibility within their environment. By using the Plugin, the User accepts these terms and assumes all risks associated with its use.

The above provisions do not exclude liability for damages caused intentionally by Wirtualna Polska Media S.A., nor in any cases where such exclusion would be contrary to mandatory provisions of law.