Integrate Kameleoon with Shopify Plus

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 22/09/2020

4 min

Advanced

Was this content useful?

The Kameleoon/Shopify integration enables Kameleoon account holders with stores on Shopify Plus to easily connect the two solutions and instantly deliver value. 

In this article, we provide you with instructions on how to easily integrate Kameleoon with your store on Shopify Plus. Please note that these implementation guidelines only work if you have a Shopify Plus and Kameleoon account.

Key benefits

  • Easily and accurately connect your Shopify Plus account to Kameleoon in just a few minutes.
  • Automatically and instantly feed customer data e.g. page visits, checkout status, cart abandonment, etc. from your Shopify Plus e-commerce store into Kameleoon to run impactful experiments and personalizations.
  • Gain full access to all of Kameleoon’s optimization and personalization solutions and features to create a better customer experience on your e-commerce store
  • Quickly and easily analyze experiment and personalization performance data from your Shopify Plus e-commerce store on Kameleoon’s reporting dashboard.

Use case examples

  • Prevent cart abandonment. With event tracking, find out instantly when a customer with a large AOV abandons a cart and take action with pop-ins, automatic discounts, and other personalizations. Help your customers follow through with their purchases.
  • Maximize checkout. Using Kameleoon AI, automatically measure the purchase intention of each shopper in real-time. Trigger the right actions to convert visitors into buyers with Kameleoon Conversion Score (KCS™).
  • Personalize customer journeys. Serve relevant products, messages, and content – in real time – to every customer – across all your channels – from arrival to checkout to keep them engaged and loyal to your brand.

Installation via the Shopify app

You can easily connect the two solutions with the dedicated application on your Shopify account.

Install the app on your store here

You can also install it in your “Apps” menu. Click on “Customize your store” and search for Kameleoon.

You will need to enter your Kameleoon sitecode in the settings of the app.

The Kameleoon script is then automatically injected on all pages of your shop.

Kameleoon will also automatically handle the tracking of the main e-commerce events that occur on your shop: transaction, product views, collection views, access to the cart page, transaction. Once the App enabled on your Shopify store, our API will send events to Kameleoon whenever your visitors view a product, a specific collection of products, add a product to cart or make a purchase. It will allow you to obtain statistics about a given product (how many times it was bought or viewed in the last hour or day) or to create groups of audiences you can then use in our Segment builder, thanks to predefined product targeting criteria. Lastly, it can also be used to obtain a set of automatic product recommendations thanks to our machine learning product algorithms.

In order to track conversions (purchases), you will need to create a transaction KPI in your Kameleoon account. Name your goal “transaction_shopify“. The value is the Net-value (subtotal + shipping cost – shipping discount + taxes). 

When installing the application, Kameleoon adds 5 snippets. Feel free to update them if you have a specific setup in your Shopify store. In this case, we recommend you follow the manual installation guidelines below.

  • kameleoon-root-script.liquid (contains the Kameleoon script). This liquid file is being called from the theme.liquid and checkout.liquid files.
  • kameleoon-product-script.liquid (contains the code to track the products viewed by a visitor). This liquid file is being called from the product.liquid file.
  • kameleoon-cart-script.liquid (contains the code to track additions to the cart). This liquid file is being called from the cart.liquid file.
  • kameleoon-collection-script.liquid (contains the tracking of categories / collections). This liquid file is being called from the collection.liquid file.
  • kameleoon-checkout-script.liquid (contains the code to track transactions / purchases). This liquid file is being called from the kameleoon-root-script.liquid.

Manual installation

You can also manually set up the bridge with Shopify.

Step 1: Implement the Kameleoon snippet on every page of your Shopify store

First, you will need to create a new site in your Kameleoon account. Please follow the guidelines provided in this article. We recommend you implement our asynchronous snippet with anti-flicker. The setup should look as shown in the image below. 

Retrieve the snippet that is created by Kameleoon once the installation is complete.

In your Shopify Admin console, go to Sales Channels > Online Store > Themes > Actions > Edit Code.

In the theme.liquid and checkout.liquid files (Layout section), paste the Kameleoon snippet into the opening <head> section, as shown in the screenshot below, and save the new configuration.

Great! Kameleoon has now been installed on your Shopify store!

You can now use the Graphic editor from any page, and take full advantage of all of Kameleoon’s capabilities. 

Tip: We recommend that you validate the settings with the Shopify Preview mode, before going live with the update for all your visitors.

If you are able to launch the Graphic editor as shown in the image below, it means that the snippet has been successfully implemented, so well done!

Step 2: Implement the Kameleoon transaction KPI on “Thank You” pages

In order to track conversions (purchases), you will need to create a transaction KPI in your Kameleoon account and add our Activation API tracking call to the “Thank You” pages of your store. Go to KPIs > Goals and click on the “New goal” CTA. Choose your website and select the “Custom Goal” type of goal as shown in the image below.

Name your goal “Purchase” or “E-commerce transaction”, it’s up to you! Once the KPI has been created, Kameleoon will generate a tracking API call (Kameleoon.API.processConversion("ID"). Retrieve the KPI ID as shown in the image below. 

In your Shopify Admin console, go to Sales Channels > Online Store > Themes > Actions > Edit code. In the checkout.liquid file (Layout section), paste the following code into the opening <head> section. In the above code, XXXXXX is the Kameleoon KPI ID to which the revenue is going to be attached. Please replace it with your KPI ID and save the new configuration.

<script type="text/javascript">

if(Shopify.Checkout.page == "thank_you"){    
     window.kameleoonQueue = window.kameleoonQueue || [];
     kameleoonQueue.push(['Goals.processConversion', XXXXXX, parseFloat({{checkout.total_price | money_without_currency}})]);
 }

</script>

We also recommend you follow these Shopify guidelines about editing the checkout.liquid.

The following step is optional and can only be enabled if you have the Kameleoon AI Personalization module.

Step 3: Synchronize your Product catalog feed with Kameleoon

Kameleoon Product API is a powerful way to interact with your product catalog. It can be used to automatically synchronize your product catalog feed with Kameleoon. Once it’s been enabled on your Shopify store, our API will send events to Kameleoon whenever your visitors view a product, a specific collection of products, add a product to their cart or make a purchase. It will also enable you to obtain statistics about a given product (how many times it was bought or viewed in the last hour or day) or to create groups of audiences you can then use in our Segment builder, thanks to predefined product targeting criteria. Finally, it can also be used to obtain a set of automatic product recommendations thanks to our machine learning product algorithms.

From your Shopify Admin console, go to Sales Channels > Online Store > Themes > Actions > Edit Code

Product View

In the product.liquid file (Templates section), paste the following code to the bottom of the file. It will trigger the trackProductView API whenever a visitor accesses a product page on your Shopify store, sending your main product attributes to Kameleoon.

<script type="text/javascript">

window.kameleoonQueue = window.kameleoonQueue || [];

var product_item = {

name: "{{ product.title }}",

categoryID: {{ product.collections[0].id }},

category: "{{ product.collections[0].title }}",

mainImageURL: "https:{{ product.featured_image.src|img_url:'grande' }}",

url: "{{ shop.secure_url }}{{ product.url }}",

brand: "{{ product.vendor }}",

price: "{{ product.price_min | money_without_currency }}",

available: {{ product.available }},

sku: "{{ product.id }}",

description: "{{ product.content }}"

};

kameleoonQueue.push(['Products.trackProductView', "{{ product.id }}", product_item]);

</script>

Collection (Category) View

In the collection.liquid file (Templates section), paste the following code to the bottom of the file. It will trigger the trackCategoryView API whenever a visitor accesses a collection page on your Shopify store, sending the collection ID to Kameleoon.

<script type="text/javascript">

window.kameleoonQueue = window.kameleoonQueue || [];

kameleoonQueue.push(['Products.trackCategoryView', {{ collection.id }}]);

</script>

Please note that if your Shopify store uses several collections files (one per main product category for instance), you need to paste the Kameleoon code in each of them.

Add to Cart

If your website has a cart page, please paste the code below in the cart.liquid file (Templates section), otherwise please paste the code in the checkout.liquid file.

  • In the cart.liquid file (Templates section):

Paste the following code to the bottom of the file. It will trigger the trackAddToCart API whenever a visitor accesses the cart page on your Shopify store, sending the cart details to Kameleoon.

<script type="text/javascript">

window.kameleoonQueue = window.kameleoonQueue || [];

var cart_items = {{cart.items | json}};

if (cart_items.length > 0){

cart_items.forEach(function (product_item) {

kameleoonQueue.push(['Products.trackAddToCart', product_item.product_id.toString(), parseFloat(product_item.final_price / 100), product_item.quantity]);

});

}

</script>
  • In the checkout.liquid file:

If your website doesn’t have a cart page, please paste the following code in the checkout.liquid file.

<script type="text/javascript">

if(Shopify.Checkout.step == "contact_information"){
     window.kameleoonQueue = window.kameleoonQueue || [];
     {% for line_item in checkout.line_items %}
   kameleoonQueue.push(['Products.trackAddToCart', '{{ line_item.product_id }}', {{ line_item.price | divided_by: 100.00 }}, {{ line_item.quantity }}]); {% endfor %}
 }

</script>

Transaction

In the checkout.liquid file (Layout section), paste the following code to the bottom of the file. It will trigger the trackTransaction API whenever a visitor makes an order on your Shopify store, sending the order details to Kameleoon.

 <script type="text/javascript">
 

 if(Shopify.Checkout.page == "thank_you"){
 
 var line_items = [];
 {% for line_item in checkout.line_items %}
 line_items.push({
 productId: '{{ line_item.product_id }}',
 quantity: {{ line_item.quantity }},
 });
 {% endfor %}
 

 kameleoonQueue.push(['Products.trackTransaction', line_items]);
 }
 

 <script> 

The Kameleoon x Shopify Plus integration is now fully enabled, so you can now create experiments and personalizations on your store!

  • In this article :