WP Pixel Integration with Shoper

Warning

The plugin currently does not have active support.
In case of errors, we recommend integration via Google Tag Manager or manually adding WP Pixel codes directly to the site.

Step 1: Go to Custom Integrations

Log in to the Shoper store admin panel.
Navigate to: Add-ons and integrations → Custom integrations

In the Page header - <head> field, insert the main WP Pixel code initializing the tool.
Replace WP_PIXEL_ID with the identifier assigned to your store.

<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>

In the Page footer, before closing </body> field, insert the appropriate tracking scripts, such as:

View - page view tracking

<script>
    // View
    wph('track', 'ViewContent', { 'content_name': 'View' })
</script>

ProductList - product list tracking

<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 - product view tracking

<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 - add to cart tracking
Version of the code if the page refreshes after adding to the cart (and possibly redirects to the cart page):

<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 - add to cart tracking
Version of the code if the page does not refresh and shows a confirmation message

<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 - order confirmation tracking

<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>

Done!

WP Pixel integration has been successfully completed 🎉
In case of technical difficulties, you can use integration via GTM or ask your developer for support.

WP Pixel Integration with Shoper

Step 1: Go to Custom Integrations

Step 2: Add code to the page header

Step 3: Add event codes in the footer

Done!