Shopify

A guide to implement Criteo solutions in Shopify.

Overview

This tutorial will explain how to install the Criteo OneTag on your Shopify site.

[[disclaimer-nonplugin]]

Feed

Create API Key

For Shopify integrations, the easiest and most stable method of pulling the product feed is directly through the Shopify API. You will need to create the keys needed for our server to pull the needed product data remotely.

  1. Click on Apps in the left slider 11

  2. Scroll to the bottom of the page and select "Manage private apps" 11

  3. Create a Private app 12

  4. Title the new app "Criteo Feed Pull" 13

  5. Copy ALL of the authentication information and send them to your Criteo Contact. 14

  6. The Feed Url will look like this {{domain}}/admin/products.json?page={0}&limit=250

Tags

Creating a new Snippet

  1. Mouse over to the left of the Shopify Admin Dashboard and click the Globe Icon 1

  2. The main theme is the first one displayed in your list of themes. Edit this HTML/CSS 2

  3. Now under the Snippets section in the left slider, click "Add a New Snippet" . 3

  4. Name the snippet 'criteo-tracking' with no quotes. Shopify will automatically append the extension '.liquid' to the snippet name.

Edit the new Snippet

  1. Copy the code provided into this new Snippet

    The criteo-tracking snippet lives inside the Shopify platform and will remain static regardless of published theme.

  2. Your account ID in the criteo-tracking script should be: {{accountid}} 5

  3. Save the new Snippet 6

<!-- Begin Criteo OneTag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
{% assign template-type = template | split: '.' | first %}
{% if template-type == 'cart' or template-type == 'collection' or template-type == 'index' or template-type == 'product' %}
{% unless template-type == 'cart' and cart.item_count < 1 %}
<script type="text/javascript">
(function(){

function priceFromCents(cents) {
    if (typeof(cents) != "number")
        return;

    return (cents / 100);
}

var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
  { event: "setAccount", account: {{accountid}} },
  { event: "setEmail", email: "{{ customer.email }}" },
  { event: "setSiteType", type: deviceType },
  {% case template-type %}
  {% when 'cart' %}{ event: "viewBasket", ecpplugin: "shopify", item: [{% for item in cart.items %}{% unless forloop.index0 == 0 %}, {% endunless %}{ id: "{{ item.product_id }}", price: priceFromCents({{ item.price }}), quantity: {{ item.quantity }} }{% endfor %}]}
  {% when 'collection' %}{ event: "viewList", ecpplugin: "shopify", item: [{% for product in collection.products limit:3 %}{% if forloop.index0 != 0 %},{% endif %}"{{product.id}}"{% endfor %}]}
  {% when 'index' %}{ event: "viewHome", ecpplugin: "shopify" }
  {% when 'product' %}{ event: "viewItem", ecpplugin: "shopify", item: "{{ product.id }}" }
  {% endcase %}
);

function isRelevantCartUpdate(settings) {
    function dataContains(term) {
        return settings.data && settings.data.indexOf && settings.data.indexOf(term) > -1;
    }

    return (settings.url == "/cart/add.js" || settings.url == "/cart/update.js")
      && (
        dataContains('attributes[prod') ||
        (dataContains('id=') && dataContains('quantity='))
      );
}

$(document).ajaxSuccess(function(event, xhr, settings) {
    if (isRelevantCartUpdate(settings)) {
        $.getJSON("/cart.js", function(data) {
            var basketData = [];
            var item;

            if (!data.items || !data.items.length)
                return;

            for (var i = 0; i < data.items.length; i++) {
                item = data.items[i];

                basketData.push({
                    id: item.product_id,
                    price: priceFromCents(item.price),
                    quantity: item.quantity
                });
            }

            window.criteo_q.push({
                event: "viewBasket",
                product: basketData
            });
        });
    }
});
})();
</script>
{% endunless %}
{% endif %}
<!-- End Criteo OneTag -->

Edit Theme

  1. Copy the provided include statement into theme.liquid

    this include statement must be manually added to theme.liquid of the live theme.

  2. Paste the include statement at the bottom of your theme.liquid (before the tags)
    7

  3. Save your theme. 8

<!----- YOU MUST INCLUDE THIS STATMENT WHEN USING A NEW THEME OR CRITEO TAGS WILL BREAK ---------->

  {% include 'criteo-tracking' %}

<!----- YOU MUST INCLUDE THIS STATMENT WHEN USING A NEW THEME OR CRITEO TAGS WILL BREAK ---------->

Adding Conversion Script

  1. Click on Settings in left slider 9

  2. Click Checkout in the left slider 10

  3. In Additional content & Scripts paste the provided code at the very bottom

  4. Your account ID in the checkout script should be: {{accountid}}

<!-- CRITEO START -->
{% if first_time_accessed %}
    <script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
    <script type="text/javascript">
        var site_type = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
        var criteo_items = [];
        criteo_items.push({id : "ordertotal",price :{{order.subtotal_price | money_without_currency | remove: ","}}, quantity : 1});
        {% for item in order.line_items %}
        criteo_items.push({id : "{{item.product.id}}",price : 0, quantity : 1});
        {% endfor %}
          window.criteo_q = window.criteo_q || [];
          window.criteo_q.push(
            { event: "setAccount", account: {{accountid}} },
            { event: "setSiteType", type: site_type},
            { event: "setEmail", email: "{{customer.email | remove: " " | strip_newlines | downcase | md5}}"},
            { event: "trackTransaction", ecpplugin: "shopify", id: "{{order.order_number}}", product: criteo_items});
    </script>
{% endif %}
<!-- CRITEO END -->

OneTag 2.0

[[cname]]

Verification

[[accurate]]