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 defualt 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 deviceType = /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d";
var CRTO_Email = "{{customer.email}}" || "";
switch("{{page_type}}") {
    case "product":
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
        { event : "setAccount", account : CRTO_PartnerID},
        { event : "setSiteType", type: deviceType},
        { event : "setEmail", email: CRTO_Email},
        { event : "viewItem", ecpplugin: "bigcommerce-V2", item: "{{product.id}}"}
    );
    break;
    case "category":
        var CRTO_ListingArray = []; 
        {{#each category.products}}
            CRTO_ListingArray.push("{{id}}");
        {{/each}}
        window.criteo_q = window.criteo_q || [];
        window.criteo_q.push(
            { event : "setAccount", account : CRTO_PartnerID},
            { event : "setSiteType", type: deviceType},
            { event : "setEmail", email: CRTO_Email},
            { event : "viewList", ecpplugin: "bigcommerce-V2", item: CRTO_ListingArray}
        );
            break;
    case "cart":
            var CRTO_BasketData = [];
            var CRTO_RawBasketData_Physical = [];
            var CRTO_RawBasketData_Digital = [];
            var CRTO_RawBasketData_Giftcertificates = [];
            fetch('/api/storefront/carts?include=',{'credentials':'include','headers':{'Accept':'application/json', 'Content-Type': 'application/json'}}).then(function(response){ response.json().then(function(data) {
                CRTO_RawBasketData_Physical.push(data[0].lineItems.physicalItems);
                CRTO_RawBasketData_Digital.push(data[0].lineItems.digitalItems);
                CRTO_RawBasketData_Giftcertificates.push(data[0].lineItems.giftCertificates);

                if (CRTO_RawBasketData_Physical[0].length > 0){
                    for (var x =0; x<CRTO_RawBasketData_Physical[0].length; x++){
                        CRTO_BasketData.push({
                            'id': CRTO_RawBasketData_Physical[0][x].productId,
                            'price': CRTO_RawBasketData_Physical[0][x].salePrice,
                            'quantity': CRTO_RawBasketData_Physical[0][x].quantity
                        });
                    }
                }
                if (CRTO_RawBasketData_Digital[0].length > 0){
                    for (var x =0; x<CRTO_RawBasketData_Digital[0].length; x++){
                        CRTO_BasketData.push({
                            'id': CRTO_RawBasketData_Digital[0][x].productId,
                            'price': CRTO_RawBasketData_Digital[0][x].salePrice,
                            'quantity': CRTO_RawBasketData_Digital[0][x].quantity
                        });
                    }
                }
                if (CRTO_RawBasketData_Giftcertificates[0].length > 0){
                    for (var x =0; x<CRTO_RawBasketData_Giftcertificates[0].length; x++){
                        CRTO_BasketData.push({
                            'id': CRTO_RawBasketData_Giftcertificates[0][x].productId,
                            'price': CRTO_RawBasketData_Giftcertificates[0][x].salePrice,
                            'quantity': CRTO_RawBasketData_Giftcertificates[0][x].quantity
                        });
                    }
                }
                window.criteo_q = window.criteo_q || [];
                window.criteo_q.push(
                    { event: "setAccount", account: CRTO_PartnerID},
                    { event: "setSiteType", type: deviceType }, 
                    { event: "setEmail", email: CRTO_Email},
                    { event: "viewBasket", ecpplugin: "bigcommerce-V2", item: CRTO_BasketData}
                );
            })});
            break;
        default:
            window.criteo_q = window.criteo_q || [];
            window.criteo_q.push(
                { event: "setAccount", account: CRTO_PartnerID},
                { event: "setSiteType", type: deviceType }, 
                { event: "setEmail", email: CRTO_Email},
                { event: "viewHome" , ecpplugin: "bigcommerce-V2" }
            );
    }    
</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 "Affiliate Conversion Tracking"
bigcommerce_theme

11) 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>
    //Set the partner ID
    var CRTO_PartnerID = {{accountid}};

    //Grab the standard info (device type and email)
    var deviceType = /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d";

    var CRTO_ConversionData = [];
    var CRTO_RawConversionData_Physical = [];
    var CRTO_RawConversionData_Digital = [];
    var CRTO_RawConversionData_Giftcertificates = [];
    fetch('/api/storefront/order/%%ORDER_ID%%', {credentials: 'include'}).then(function(response) {return response.json();}).then(function(data) {
        CRTO_RawConversionData_Physical.push(data.lineItems.physicalItems);
        CRTO_RawConversionData_Digital.push(data.lineItems.digitalItems);
        CRTO_RawConversionData_Giftcertificates.push(data.lineItems.giftCertificates);
        if (CRTO_RawConversionData_Physical[0].length > 0){
            for (var x =0; x<CRTO_RawConversionData_Physical[0].length; x++){
                CRTO_ConversionData.push({
                    'id': CRTO_RawConversionData_Physical[0][x].productId,
                    'price': (CRTO_RawConversionData_Physical[0][x].salePrice / CRTO_RawConversionData_Physical[0][x].quantity),
                    'quantity': CRTO_RawConversionData_Physical[0][x].quantity
                });
            }
        }
        if (CRTO_RawConversionData_Digital[0].length > 0){
            for (var x =0; x<CRTO_RawConversionData_Digital[0].length; x++){
                CRTO_ConversionData.push({
                    'id': CRTO_RawConversionData_Digital[0][x].productId,
                    'price': (CRTO_RawConversionData_Digital[0][x].salePrice / CRTO_RawConversionData_Digital[0][x].quantity),
                    'quantity': CRTO_RawConversionData_Digital[0][x].quantity
                });
            }
        }
        if (CRTO_RawConversionData_Giftcertificates[0].length > 0){
            for (var x =0; x<CRTO_RawConversiontData_Giftcertificates[0].length; x++){
                CRTO_ConversionData.push({
                    'id': CRTO_RawConversionData_Giftcertificates[0][x].productId,
                    'price': (CRTO_RawConversionData_Giftcertificates[0][x].salePrice / CRTO_RawConversionData_Giftcertificates[0][x].quantity) ,
                    'quantity': CRTO_RawConversionData_Giftcertificates[0][x].quantity
                });
            }
        }
        window.criteo_q = window.criteo_q || [];
        window.criteo_q.push(
            { event: "setAccount", account: CRTO_PartnerID},
            { event: "setSiteType", type: deviceType }, 
            { event: "setEmail", email: data.billingAddress.email},
            { event: "trackTransaction", ecpplugin: "bigcommerce-V2", id: "%%ORDER_ID%%" , item: CRTO_ConversionData}
        );
    });
</script>

12) Hit save!

Verification

[[accurate]]