BigCommerce

A guide to implement Criteo solutions in BigCommerce.

Overview

This tutorial will explain how to give us credentials to your API to pull a default BigCommerce feed as well as how to install the Criteo tags on your site.

[[disclaimer-nonplugin]]

Feed

  1. Navigate to the admin panel of your store and click on the "Advanced Settings" tab in the left hand navigation bar.
    bigcommerce_theme
  2. Click on "API Accounts" tab in the left hand navigation bar.
    bigcommerce_theme
  3. Click on "Create API Account" button.
    bigcommerce_theme
  4. Name this API "criteo" and allow access to the "Products" endpoint, hit save and send us the file that was downloaded.
    bigcommerce_theme

Tags

Steps

1) Click Storefront Design in the left panel
bigcommerce_storefront

2) Click Script Manager
bigcommerce_theme

3) Click Create a Script
bigcommerce_template

4) Copy the details from the image below into the new script you created
bigcommerce_template

5) Copy the following code into the "script contents" section

<script>
    var CRTO_PartnerID = {{accountid}};
    var CRTO_DeviceType = /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d";
    var CRTO_Email = "{{customer.email}}" || "";
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
        { event : "setAccount", account : CRTO_PartnerID},
        { event : "setSiteType", type: CRTO_DeviceType},
        { event : "setEmail", email: CRTO_Email}
    );
    switch("{{page_type}}") {
        case "product":
            window.criteo_q.push({ event : "viewItem", ecpplugin: "BigCommerce-Stencil", item: "{{product.id}}"});
            break;
        case "category":
            var CRTO_ListingArray = []; 
            {{#each category.products}}
                CRTO_ListingArray.push("{{id}}");
            {{/each}}
            window.criteo_q.push({ event : "viewList", ecpplugin: "BigCommerce-Stencil", item: CRTO_ListingArray});
            break;
        case "cart":
            var CRTO_BasketData = [];
            fetch('/api/storefront/carts?include=',{'credentials':'include','headers':{'Accept':'application/json', 'Content-Type': 'application/json'}}).then(function(response){ return response.json();}).then(function(data) { 
                for (x in data[0].lineItems){
                    if(data[0].lineItems[x] != []){
                        for (y in data[0].lineItems[x]){
                            CRTO_BasketData.push({
                                'id': data[0].lineItems[x][y].productId,
                                'price': data[0].lineItems[x][y].salePrice,
                                'quantity': data[0].lineItems[x][y].quantity
                            })
                        }
                    }
                }
                window.criteo_q.push({ event: "viewBasket", ecpplugin: "BigCommerce-Stencil", item: CRTO_BasketData});
            });
            break;
        default:
            window.criteo_q.push({ event: "viewHome" , ecpplugin: "BigCommerce-Stencil" });
    }
</script>

6) Click Create a Script
bigcommerce_template

7) Copy the details from the image below into the new script you created
bigcommerce_template The "Script URL" in the image is: https://static.criteo.net/js/ld/ld.js

8) Hit save!

9) Click on the "Advanced Settings" tab in the left hand navigation bar.
bigcommerce_theme

10) Click on "Web Analytics"
bigcommerce_theme

11) Make sure you have "Affiliate Conversion Tracking" enabled. bigcommerce_theme

12) Navigate to the "Affiliate Conversion Tracking" tab. bigcommerce_theme

13) Copy the code below into that box (if there is any code there already, place it at the bottom of the box under the old code)

<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script>
    var CRTO_PartnerID = {{accountid}};
    var CRTO_DeviceType = /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d";
    var CRTO_ConversionData = [];
    fetch('/api/storefront/order/%%ORDER_ID%%', {credentials: 'include'}).then(function(response) {return response.json();}).then(function(data) {
        CRTO_user_zipcode = data.billingAddress.postalCode;
        for (x in data.lineItems){
            if(data.lineItems[x] != []){
                for (y in data.lineItems[x]){
                    CRTO_ConversionData.push({
                        'id': data.lineItems[x][y].productId,
                        'price': (data.lineItems[x][y].salePrice / data.lineItems[x][y].quantity),
                        'quantity': data.lineItems[x][y].quantity
                    })
                }
            }
        }
        window.criteo_q = window.criteo_q || [];
        window.criteo_q.push(
            { event: "setAccount", account: CRTO_PartnerID},
            { event: "setSiteType", type: CRTO_DeviceType },
            { event: "setEmail", email: data.billingAddress.email},
            { event: "trackTransaction", ecpplugin: "BigCommerce-Stencil", id: "%%ORDER_ID%%" , item: CRTO_ConversionData}
        );
    });
</script>

14) Hit save!

OneTag 2.0

[[cname]]

Verification

[[accurate]]