If you use Shopify, this article should help you to successfully implement a Qzzr Purchase Milestone Event. 

Before you get started:

  • Make sure you have access to your Shopify admin panel
  • Make sure you have implemented our SDK and have your SDK token as explained in this article.

Add the SDK to the order status page

Unless you have Shopify Plus, you will have to implement our purchase milestone event on the Order Status page. 

  1. Open your Shopify Admin panel and navigate to Settings > Checkout. 
  2. Scroll down to the Additional Scripts
  3. Paste your SDK code in to this field.
<!-- Start Qzzr -->
<script>!function(Q,Z,z,R){R=Q[Z]=Q[Z]||function(){R.q.push(arguments)},
R.q=R.q||[],R(R,z)}(window,'qzzrEvents','YOUR_TOKEN');</script>
<script src="//edge.qzzr.co/lib/sdk.js" async></script>
<!-- End Qzzr -->

Be sure to replace the 'YOUR_TOKEN' with the token you get from your Account Manager. 

Add the milestone event to the order status page

Now you will need to use Shopify's liquid template tags to populate our Purchase milestone event with the needed properties. 

Paste the following code in to the same "Additional scripts" field of the order status page below the Qzzr SDK code.

<!-- Start Qzzr -->
<script>
qzzrEvents('$purchase', {
  id: {{ order.order_number | json }},
  revenue: {{ order.total_price | json }},
  products: [
  {% for line_item in order.line_items %}
    {
      name: {{ line_item.product.title | json }},
      id: {{ line_item.product.id | json }},
      price: {{ line_item.product.price | json }},
      variant_id: {{ line_item.variant_id | json }},
      variant: {{ line_item.variant.title | json }},
      quantity: {{ line_item.quantity | json }},
    },
  {% endfor %}
  ]
});
</script>
<!-- End Qzzr -->

These are the basic properties that should be passed in with the purchase event. If you are versed in Shopify's Liquid tags, you can add properties or modify the properties what we've provided in this example code.

Associate milestone events with your customer identifiers (optional)

If you would like to associate the anonymous data from the Qzzr experience with your customer identifiers by calling $identify:

Here is a Shopify specific syntax for sending customer id and customer email. 

<!-- Start Qzzr -->
<script>
qzzrEvents('$identify', {
  id: {{ customer.id | json }},
  email: {{ customer.email | json }}
});
</script>
<!-- End Qzzr -->

Did this answer your question?