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™). You need AI Predictive Targeting to activate the KCS option.
- 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.
After downloading and installing the Kameleoon application from the Shopify app store, you can follow these few steps to configure it.
Install the Kameleoon script
To install the Kameleoon script, open the Kameleoon app and click Edit Settings.
In the Settings page, you can see that the Kameleoon script is not installed and therefore there is no themes using the Kameleoon script.
Click on the Install button.
In the pop-up, you can enter your sitecode and click Save.
If you want the Kameleoon script to be used not only in the current theme but in any selected themes, unselect the checkbox in the pop-up before saving.
Now, you should see the sitecode that you provided along with the number of themes using the number of themes using the Kameleoon script that should be updated.
Add more themes
To add more themes, click on the Edit button in the second section.
Select the themes you would like to use with Kameleoon and click Save.
The number of themes is now updated.
By following theses few steps described above, you can use Kameleoon in multiple themes according to the selected theme that you configured.
Events tracking
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 project 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 project 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
This is a premium feature that requires an add-on (Product API) with an additional usage fee. To access this feature, please contact your Customer Success Manager for pricing and licensing options.
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 }}",
categories: [{
"id": "{{ product.collections[0].id }}",
"name": "{{ product.collections[0].title }}",
"parent": null,
"url": null
}],
imageURL: "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!
