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 allows Kameleoon account holders with stores on Shopify Plus to easily connect the two solutions and instantly deliver value. 

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, check out status, cart abandonment, etc. from your ecommerce Shopify Plus store into Kameleoon to run impactful a/b tests and personalizations.
  • Gain full access to all of Kameleoon’s optimization and personalization solutions and features to create a better customer experience on your ecommerce store
  • Quickly and easily analyze a/b test and personalization performance data from your ecommerce store on Shopify Plus on Kameleoon’s reporting dashboard.

Use case examples

  • Prevent cart abandonment. With event tracking, instantly know when a customer with a large AOV abandons a cart and take action with pop-ins, automatic discounts, and other a/b tested 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 check out to keep them engaged and loyal to your brand.

Installation summary

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.

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 which 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 file (Layout section), paste the Kameleoon snippet in the opening <head> section, as shown in the screenshot below, and save the new configuration.

Great! Kameleoon has 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 you validate the settings with the Shopify Preview mode, before publishing live the update for all your visitors.  

If you are able to launch the graphic editor as shown in the image below, it means the snippet has been successfully implemented, great job!

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 hit the CTA “New Goal”. Choose your site and select the type of goal “Custom goal” as shown in the image below.

Name your goal “Purchase” or “E-commerce transaction”, it is up to you! Once the KPI is 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 in 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">

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

kameleoonQueue.push(['Goals.processConversion', XXXXXX, parseFloat({{checkout.total_price}})]);

</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 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.

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 }},

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>

Add to Cart

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}};

if (cart_items.length > 0){

cart_items.forEach(function (product_item) {

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

});

}

</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">

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

var order_items = {{checkout.line_items}};

if (order_items.length > 0){

    kameleoonQueue.push(['Products.trackTransaction', order_items.map(function(product_item) {

        return {

            productId: product_item.product_id,

            quantity: product_item.quantity

        }

    })]);

}

<script>

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

  • In this article :