Implement the snippet in Shopify to track purchases

In case the "Use online purchases" option was selected during the installation of the Connectif App in Shopify in the "Purchases" section, it will be necessary to implement the snippet that allows tracking purchases in Connectif.

In this article, you will learn how to do it.

STEP 1: Obtaining the tracking snippet

To start, you need to obtain the tracking snippet from your Connectif account.

1. Copy the appropriate purchase tracking snippet for your configuration:

• If you selected the "Products with variants" option, use this snippet:

<!-- Start of Connectif Purchase Snippet v5 variants -->
<div class="cn_purchase" style="display:none">
{% if checkout.attributes.cartId %}
<span class="cart_id">{{ checkout.attributes.cartId }}</span>
{% else %}
{% assign cartId = "now" | date: "%N" %}
<span class="cart_id">{{ cartId }}</span>
{% endif %}
<span class="purchase_id">{{ checkout.id }}</span>
<span class="purchase_date">{{ checkout.order.created_at | date: "%FT%H:%M:%S.%L%z" }}</span>
<span class="total_quantity">{{ checkout.line_items | size }}</span>
<span class="total_price">{{ checkout.total_price | times: 0.01 }}</span>
{% for item in checkout.line_items %}
<div class="product_basket_item">
<span class="quantity">{{ item.quantity }}</span>
<span class="price">{{ item.final_line_price | times: 0.01 }}</span>
{% if item.variant.title == "Default Title" %}
<span class="name">{{item.product.title | escape}}</span>
{% else %}
<span class="name">{{item.product.title | escape}} {{ item.variant.title | escape }}</span>
{% endif %}
<span class="url">{{ shop.url }}{{ item.product.url }}</span>
<span class="product_id">{{ item.product_id }}</span>
<span class="unit_price">{{ item.final_price | times: 0.01 }}</span>
<span class="published_at">{{ item.product.published_at | date: "%FT%H:%M:%S.%L%z" }}</span>
<span class="image_url">https:{{item.image.src | product_img_url: '300x300' }}</span>
<span class="description">{{item.product.description | strip_html | escape }}</span>
{% assign unit_price_original = item.variant.compare_at_price | at_least: item.final_price %}
<span class="unit_price_original">{{unit_price_original | times: 0.01 }}</span>
{% assign discounted_amount = unit_price_original | minus: item.final_price %}
<span class="discounted_amount">{{discounted_amount | times: 0.01 }}</span>
{% assign percentage_factor = unit_price_original | times: 0.01 %}
{% assign discounted_percentage = discounted_amount | divided_by: percentage_factor | round: 2 %}
<span class="discounted_percentage">{{discounted_percentage}}</span>
{% for collection in item.product.collections %}
<span class="category">{{ collection.title }}</span>
{% endfor %}
{% for tag in item.product.tags %}
<span class="tag">{{ tag }}</span>
{% endfor %}
<span class="brand">{{ item.product.vendor | escape }}</span>
<span class="thumbnail_url">https:{{ item.image.src | product_img_url: '100x100' }}</span>
</div>
{% endfor %}
</div>
<div class="cn_client_info" style="display: none">
<span class="primary_key">{{ checkout.email }}</span>
<span class="_name">{{ checkout.customer.first_name }}</span>
<span class="_surname">{{ checkout.customer.last_name }}</span>
{% if checkout.customer.phone and checkout.customer.phone != "" %}
<span class="_mobilePhone">{{ checkout.customer.phone }}</span>
{% elsif checkout.shipping_address.phone and checkout.shipping_address.phone != "" %}
<span class="_mobilePhone">{{ checkout.shipping_address.phone }}</span>
{% elsif checkout.billing_address.phone and checkout.billing_address.phone != "" %}
<span class="_mobilePhone">{{ checkout.billing_address.phone }}</span>
{% endif %}
</div>
<!-- End of Connectif Purchase Snippet -->

• If you did not select the "Products with variants" option, use the following snippet:

<!-- Start of Connectif Purchase Snippet v5 -->
<div class="cn_purchase" style="display:none">
{% if checkout.attributes.cartId %}
<span class="cart_id">{{ checkout.attributes.cartId }}</span>
{% else %}
{% assign cartId = "now" | date: "%N" %}
<span class="cart_id">{{ cartId }}</span>
{% endif %}
<span class="purchase_id">{{ checkout.id }}</span>
<span class="purchase_date">{{ checkout.order.created_at | date: "%FT%H:%M:%S.%L%z" }}</span>
<span class="total_quantity">{{ checkout.line_items | size}}</span>
<span class="total_price">{{ checkout.total_price | times: 0.01 }}</span>
{% for item in checkout.line_items %}
<div class="product_basket_item">
<span class="quantity">{{ item.quantity }}</span>
<span class="price">{{ item.line_price | times: 0.01 }}</span>
<span class="name">{{ item.product.title | escape }}</span>
<span class="url">{{ shop.url }}{{ item.product.url }}</span>
<span class="product_id">{{ item.product_id }}</span>
<span class="unit_price">{{ item.product.price | times: 0.01 }}</span>
<span class="published_at">{{ item.product.published_at | date: "%FT%H:%M:%S.%L%z" }}</span&gt

;
</div>
{% endfor %}
</div>
<div class="cn_client_info" style="display: none">
<span class="primary_key">{{ checkout.email }}</span>
<span class="_name">{{ checkout.customer.first_name }}</span>
<span class="_surname">{{ checkout.customer.last_name }}</span>
{% if checkout.customer.phone and checkout.customer.phone != "" %}
<span class="_mobilePhone">{{ checkout.customer.phone }}</span>
{% elsif checkout.shipping_address.phone and checkout.shipping_address.phone != "" %}
<span class="_mobilePhone">{{ checkout.shipping_address.phone }}</span>
{% elsif checkout.billing_address.phone and checkout.billing_address.phone != "" %}
<span class="_mobilePhone">{{ checkout.billing_address.phone }}</span>
{% endif %}
</div>
<!-- End of Connectif Purchase Snippet -->

STEP 2: Adding the tracking snippet in Shopify

Once you have obtained the tracking snippet, follow these steps to add it to your Shopify store.

2. Log in to your Shopify account.

3. In the admin panel, go to Settings.

4. In the sidebar menu, click on Checkout.

5. In the Order Status Page section, paste the code.

6. Click on Save and your Shopify store will be ready to pass purchases to Connectif.

Other cases to consider

a. SKU product identifiers

If the "Use product SKU" option was selected during the installation of the Connectif App in Shopify in the "Product" section, you will need to make the following changes to the tracking snippet:

7. Go to the line with the following code: 

<span class="product_id">{{ item.product_id }}</span>

8. Replace it with the following snippet:

{% if item.sku != "" %}
<span class="product_id">{{ item.sku }}</span>
{% elsif item.product_id != "" %}
<span class="product_id">{{ item.product_id }}</span>
{% endif %}

b. Offline purchases

If the "Use offline purchases" option was selected during the installation of the Connectif App in Shopify in the "Purchases" section, it is important that if this code snippet has been previously added, it is manually removed to avoid registering duplicate purchases in Connectif.

Keep learning!

To take full advantage of your Connectif account, we recommend continuing with the following articles:

• Regenerating abandoned cart in Shopify, to recover the cart in Shopify and increase your sales volume.
• Cart Recovery URL, to learn how this URL works in Shopify and how to use it in workflows.
• Check the integration with the eCommerce, to ensure that all data is syncing correctly in your Connectif account.
• Onboarding, to fully learn about and connect your eCommerce and various platforms with Connectif.