Przejdź do treści

Integracja WP Pixel z Shopify

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: Wklej kod podstawowy WP Pixel

  1. Wejdź w: Online Store → Themes → Actions → Edit code
  2. Następnie przejdź do: layout → theme.liquid
  3. Tuż przed zamknięciem sekcji <head> dodaj:
<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>

Krok 2: Dołącz snippet na dole <body>

  1. W pliku theme.liquid, tuż przed </body>, dodaj:
{% include "wppixel.liquid" %}

Krok 3: Utwórz snippet wppixel.liquid

  1. Przejdź do: Snippets → Add a new snippet
  2. Nazwij go wppixel
  3. Wklej poniższy kod:
{%- 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 (dla 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 (dla 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 -%}

Krok 4: Dodaj zdarzenie zakupu (Purchase)

  1. Przejdź do: Settings → Checkout → Additional Scripts
  2. Wklej poniższy kod:
<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>

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.