CyberTargeter Help Center

# Add pixel to shopify website

# 1. Add Your Snippet to All Pages (Required)

  • Folder: Layouts
  • File: theme.liquid
<script type="text/javascript">
  !function(w,o,s,r,p,k,e){if(w.mkq){return}p=w.mkq=function(){p.invokeFunc?p.invokeFunc.apply(p,arguments):p.qu.push(arguments)};if(!w._mkq){w._mkq=p}p.push=p;p.qu=[];k=o.createElement(s);k.async=!0;k.src=r;e=o.getElementsByTagName(s)[0];e.parentNode.insertBefore(k,e)}(window,document,"script","//pixeltrack.clientgear.com/mkq.min.js");
  mkq('init', 'MKQ_PIXEL_ID');
</script>

# 2. Category (Collection) Pages

  • Folder: Templates
  • File: collection.liquid
<script type="text/javascript">
   mkq('track', 'ViewCategory', {
      content_name: '{{ collection.title | escape }}',
      content_category: '{{ collection.title }}',
      content_ids: [{% for line in collection.products %}'{{ line.id }}'{% unless forloop.last == true %}, {% endunless %}{% endfor %}]
  });
</script>

# 3. Product Pages (Required)

  • Folder: Templates
  • File: product.liquid
<script type="text/javascript">
   mkq('track', 'ViewContent', {
      value: '{{ product.price | money_without_currency | remove: '.' | remove: ','  | divided_by: 100.0 }}',
      currency: '{{ shop.currency }}',
      content_name: '{{ product.title | escape }}',
      content_type: 'product',
      content_ids: ['{{ product.id }}']
  });
</script>

Tracking added to the cart

  • If you are using the default theme, you can use the code below
<script type="text/javascript">
  document.getElementById('AddToCart-product-template').onclick=function(){
    mkq('track', 'AddToCart', {
      value: '{{ product.price | money_without_currency | remove: '.' | remove: ','  | divided_by: 100.0 }}',
      currency: '{{ shop.currency }}',
      content_name: '{{ product.title | escape }}',
      content_type: 'product',
      content_ids: ['{{ product.id }}']
      });
  }
</script>
  • If you're using a custom theme, you'll need to call the following code based on the AddToCart css selector.

<ADDTOCART_SELECTOR> is your CSS selector for AddToCart button

<script type="text/javascript">
  document.querySelector('<ADDTOCART_SELECTOR>').onclick=function(){
    mkq('track', 'AddToCart', {
      value: '{{ product.price | money_without_currency | remove: '.' | remove: ','  | divided_by: 100.0 }}',
      currency: '{{ shop.currency }}',
      content_name: '{{ product.title | escape }}',
      content_type: 'product',
      content_ids: ['{{ product.id }}']
      });
  }
</script>
  • The shopify themes generally use the frontend library jQuery, but if so, you can use the following code. I've added the usual code, but each theme is subject to change, so please confirm this, and if you can't, please contact our tech.
<script type="text/javascript">
  $(function(){
    $('body').on('click','.product-form__cart-submit,#AddToCart-product-template,.shopify-payment-button__button,#AddToCart-product-template',function(){
      mkq('track', 'AddToCart', {
        value: '{{ product.price | money_without_currency | remove: '.' | remove: ','  | divided_by: 100.0 }}',
        currency: '{{ shop.currency }}',
        content_name: '{{ product.title | escape }}',
        content_type: 'product',
        content_ids: ['{{ product.id }}']
        });
    })
  })
</script>

# 4. Go to the shopping cart page (required)

  • Folder: Templates
  • File: cart.liquid
<script type="text/javascript">
   mkq('track', 'ViewCart', {
    value: '{{ cart.total_price | money_without_currency | remove: '.' | remove: ','  | divided_by: 100.0}}',
    currency: '{{ shop.currency }}',
    content_ids: [{% for line in cart.items %}'{{ line.product_id }}'{% unless forloop.last == true %}, {% endunless %}{% endfor %}]
  });
</script>

# 5. Cart Page

  • Folder: Templates
  • File: cart.liquid
<script type="text/javascript">
   mkq('track', 'InitiateCheckout', {
    value: '{{ cart.total_price | money_without_currency | remove: '.' | remove: ','  | divided_by: 100.0}}',
    currency: '{{ shop.currency }}',
    content_name: 'Viewed Cart',
    num_ids: '{{ cart.item_count }}'
  });
</script>

# 6. Thank You Page (Required)

  1. Click Settings
  2. Find and click on the customer events page
  3. Click the Add Custom Pixel Code button, create the event Mkq-Purchase, and add the following code
  4. Replace the MKQ_PIXEL_ID in the request code with the corresponding Pixel ID, save the settings, and associate the created custom pixel code just now
!function (w, o, s, r, p, k, e) { if (w.mkq) { return } p = w.mkq = function () { p.invokeFunc ? p.invokeFunc.apply(p, arguments) : p.qu.push(arguments) }; if (!w._mkq) { w._mkq = p } p.push = p; p.qu = []; k = o.createElement(s); k.async = !0; k.src = r; e = o.getElementsByTagName(s)[0]; e.parentNode.insertBefore(k, e) }(window, document, "script", "https://pixeltrack.clientgear.com/mkq.min.js");
  mkq('init', 'MKQ_PILXE_ID');
  mkq('track', 'PageView', {
       title: document.title
  });
  
analytics.subscribe("checkout_completed", (event) => {
    var ids = [];
    var orderId = event.data.checkout.order.id;
    var currency = event.data.checkout.currencyCode;
    var total = event.data.checkout.totalPrice.amount;
    try{
      var checkout = event.data.checkout;
      var lineItems = checkout.lineItems;
      for(var i=0; i < lineItems.length; i++){
        ids.push(lineItems[i].variant.product.id);
      }
    }catch(e){
      console.log(e)
    }
    mkq('track', 'Purchase', {
        currency: currency,
        value: total,
        order_id: orderId,
        content_ids: ids
    });
})

shopify.gif

# 7. Track the Index Page

  • Folder: Templates
  • File: index.liquid
<script type="text/javascript">
  mkq('trackcustom', 'Home');
</script>

# 8. Track Other Pages

  • Folder: Templates
  • File: page.liquid
<script type="text/javascript">

mkq('trackcustom', 'Page', {
    title: "{{ page.title }}",
    url: "{{ page.url }}",
    author: "{{ page.author }}",
    handle: "{{ page.handle }}",
    id: {{ page.id }}
  });

</script>

# 9. Track Blog Pages

  • Folder: Templates
  • File: blog.liquid
  <script type="text/javascript">
mkq('trackcustom', 'Blog', {
    title: "{{ page.title }}",
    url: "{{ page.url }}",
    author: "{{ page.author }}",
    handle: "{{ page.handle }}",
    id: {{ page.id }}
  });
  </script>

# 10. Track Article Pages

  • Folder: Templates
  • File: article.liquid
  <script type="text/javascript">
mkq('trackcustom', 'Post', {
    title: "{{ page.title }}",
    url: "{{ page.url }}",
    author: "{{ page.author }}",
    handle: "{{ page.handle }}",
    id: {{ page.id }}
  });
  </script>

# 11. Track Search Pages

  • Folder: Templates
  • File: search.liquid
{% if search.performed %}

<script type="text/javascript">
	mkq('track', 'Search', {
		search_string: "{{ search.terms }}"
  });
</script>
{% endif %}

# 12. Registration Page

  • Folder: Templates
  • File: customers/register.liquid
<script type="text/javascript">
mkq('track', 'Lead');
</script>

# 13. Login Page

  • Folder: Templates
  • File: customers/login.liquid
<script type="text/javascript">
mkq('track', 'CompleteRegistration', {
		content_name: 'Signup',
		status: 'complete'
  });
</script>

# 14. 404 Page

  • Folder: Templates
  • File: 404.liquid
<script type="text/javascript">
mkq('trackcustom', '404');
</script>

← Add pixel to shoplazza website →