WP Pixel Integration with Shopify
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: Paste the basic WP Pixel code
- Go to:
Online Store
→Themes
→Actions
→Edit code
- Then navigate to:
layout
→theme.liquid
- Just before closing the
<head>
section add:
<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>
Step 2: Include the snippet at the bottom of <body>
- In the
theme.liquid
file, just before</body>
, add:
{% include "wppixel.liquid" %}
Step 3: Create the snippet wppixel.liquid
- Go to:
Snippets
→Add a new snippet
- Name it
wppixel
- Paste the following code:
{%- if template %}
<script>
// View
wph('track', 'ViewContent', { 'content_name': 'View' })
</script>
{% endif -%}
{%- if template == "collection" %}
<script>
// ProductList
var contents = [];
{% for product in collection.all_products %}
var item = {
id: "{{ product.id}}",
name: "{{ product.title}}",
category: "{{ product.type}}",
price: Number( ({{product.price}}/100).toFixed(2))
}
contents.push(item)
{% endfor %}
wph('track', 'ViewContent', {
'content_name': 'ProductList',
contents: contents
});
</script>
<script>
// AddToCart (for collection)
var contents_c = [];
{% for product in collection.all_products %}
var item = "{{ product.id}}"
contents_c.push(item)
{% endfor %}
var buttons = document.getElementsByName('add');
buttons.forEach(function(button, index) {
button.addEventListener('click', function() {
var idp = buttons[index].getAttribute('id').split('--')[1];
var i = contents_c.indexOf(idp);
var c = contents[i];
wph('track', 'AddToCart', {
contents: [{
id: c.id,
name: c.name,
category: c.category,
price: c.price,
quantity: 1
}]
});
});
});
</script>
{% endif -%}
{%- if template == "product" %}
<script>
// ViewProduct
wph('track', 'ViewContent', {
'content_name': 'ViewProduct',
contents: [{
id: "{{product.id}}",
name: "{{product.title}}",
category: "{{product.type}}",
price: Number(({{product.price}}/100).toFixed(2)),
quantity: 1
}]
})
</script>
<script>
// AddToCart (for product)
window.addEventListener('DOMContentLoaded', function() {
var button = document.getElementsByName('add')[0];
button.addEventListener('click', function() {
var cart_ids1 = [];
var cart_q1 = []
{% for product in cart.items %}
var id = "{{ product.id}}"
var quantity = {{product.quantity}}
cart_ids1.push(id)
cart_q1.push(quantity)
{% endfor %}
wph('track', 'AddToCart', {
contents: [{
id: "{{product.id}}",
name: "{{product.title}}",
category: "{{product.type}}",
price: Number(({{product.price}}/100).toFixed(2))
}]
});
}, false);
});
</script>
{% endif -%}
Step 4: Add the purchase event (Purchase)
- Go to:
Settings
→Checkout
→Additional Scripts
- Paste the following code:
<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>
<script>
var coupons = [];
{% for discount in order.discounts %}
var c = "{{ discount.code }}"
coupons.push(c)
{% endfor %}
if(coupons[0] == ""){
var coupon = undefined} else {
var coupon = coupons[0]
}
var contents = [];
{% for product in line_items %}
var item = {
id: '{{product.product.id}}',
name: '{{product.product.title}}',
category: '{{product.product.type}}',
price: Number(({{product.price}}/100).toFixed(2)),
quantity: {{product.quantity}}
}
contents.push(item)
{% endfor %}
wph('track', 'Purchase', {
transaction_id: '{{ order_number }}',
value: Number((({{ total_price }}-{{tax_price}}* ({{ total_price }}-{{ shipping_price }})/{{ total_price }} -{{ shipping_price }})/100).toFixed(2)),
value_gross: Number((({{ total_price }}-{{ shipping_price }})/100).toFixed(2)),
shipping_cost: Number(({{ shipping_price }}/100).toFixed(2)),
discount_code: coupon,
contents: contents
});
</script>
Done!
WP Pixel integration has been successfully completed 🎉
If you encounter technical difficulties, you can use integration via GTM or ask your developer for support.