Shopify Integration

Shopify is one of the most popular e-commerce systems that we see. Here are some details about how to integrate AvantLink into Shopify.

PLEASE NOTE: We provide this information "as-is" as a courtesy to our clientele, and as such, it may contain typos, get outdated, go out of style, be factually incorrect, or considered 'using cheats' if playing on hard mode. We cannot vouch for it's seaworthiness; sail at your own risk, and please email us with any improvements we can make!

Contents

Tracking Integration
   Shopify Documentation
   Site-Wide Script
   Order Confirmation Script
   Shopify Variables
   Shopify Test Mode
   Bold Apps Integration

Datafeed
   Creating a Datafeed - Shopify API
   Shopify Documentation

 

Tracking Integration

Shopify's "How to add tracking" documentation can be found here:

https://docs.shopify.com/manual/configuration/store-customization/page-specific/checkout-page/thankyou-page/add-conversion-tracking-to-thank-you-page

Use our standard site-wide script:

<script type="text/javascript">
(function() {
var avm = document.createElement('script'); avm.type = 'text/javascript'; avm.async = true;
avm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.avmws.com/[SITE_ID]/';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(avm, s);
})();
</script>

Full Order Confirmation script, with Shopify variables in place, and the 'for each item' loop:

<script type="text/javascript">
var _AvantMetrics = _AvantMetrics || [];
_AvantMetrics.push(['order',{ order_id:'{{order_number}}', amount:'{{subtotal_price | money_without_currency}}', state:'{{billing_address.province_code}}', country:'{{billing_address.country_code}}' }]);
{% for line in line_items %}
_AvantMetrics.push(['item',{ order_id:'{{order_number}}', variant_sku:'{{line.product.id}}', price:'{{line.price | money_without_currency}}', qty:'{{line.quantity}}' }]);
{% endfor %}
</script>
<script type="text/javascript">
(function() {
var avm = document.createElement('script'); avm.type = 'text/javascript'; avm.async = true;
avm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.avmws.com/[SITE_ID]/';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(avm, s);
})();
</script>

Please notice that here it shows product.id for the SKU, but you may need a different variable, such as line.sku if you use SKUs instead of Shopify's standard "Product IDs" on your datafeed that you provide us.

See this link for even more product-related details:
 https://docs.shopify.com/themes/liquid/objects/product

Note: The "Thank You" page via Shopify's platform, requires that the first snippet (standard site-wide Tracking Script) to be placed after the Order Confirmation script, in the "Additional content and scripts" text field. (This is because Shopify places all code in this text field below all html in the DOM. Therefore, to ensure the AvantLink library is referenced after the order tracking component it must be manually placed after the order tracking component in the "Additional content and scripts" text field.)

Shopify Variables

Link to a list of Product related variables used by Shopify / Liquid

Note: A useful one may be "collections.title", as this is effectively a Category of items. By defining this, passing it to us (using the Liquid Template below, for example), we may be able to use that to target specific items, or create multiple datafeeds, etc.

Shopify Test Mode

Shopify provides a test mode. See here for more details:
https://help.shopify.com/manual/payment-settings/shopify-payments/testing-shopify-payments
This should fire any additional scripts -- just looks like it blocks the order from saving / reporting on their side.

Bold Apps Integration

The issue with the previous script for the Shopify integration was that there was liquid in the script itself. The majority of third party checkouts don't allow liquid to run and need to be JS specific.

We were able to alter the liquid in the script to what is below, in order to accomplish the same requirements:

var _AvantMetrics = _AvantMetrics || [];

_AvantMetrics.push(['order', {
order_id: BOLD.order.id,
amount: BOLD.order.subtotal,
state: BOLD.order.billing_address.province_code,
country: BOLD.order.billing_address.country_code
}]);

BOLD.order.line_items.forEach(function(lineItem) {
_AvantMetrics.push(['item', {
order_id: BOLD.order.id,
variant_sku: lineItem.platform_variant_id,
price: lineItem.price,
qty: lineItem.quantity
}]);
});

(function() {
var avm = document.createElement('script'); avm.type =
'text/javascript'; avm.async = true;
avm.src = ('https:' == document.location.protocol ? 'https://' :
'http://') + 'cdn.avmws.com/[SITE_ID]/';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(avm, s);
})();

 

If you embed this on Thank You or Confirmation pages in third party checkouts or apps such as Recurring Orders in the 'additional scripts' or 'custom scripts' sections, all should trigger properly!

(Thanks to Bold Commerce Grant for providing this information!) 

Creating a Datafeed - Shopify API:

The best way we can pull your feed is directly from the Shopify API.

See our article here for exact steps:

https://support.avantlink.com/hc/en-us/articles/115005423823-How-to-Provide-AvantLink-With-Your-Shopify-API-Key

 

Shopify Documentation

Still stumped? See Shopify Documentation Here

Have more questions? Submit a request
Powered by Zendesk