BigCommerce¶

A guide to implement Criteo solutions in BigCommerce Stencil.

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]]

[[disclaimer-zipcode]]

Feed¶

1)Navigate to the admin panel of your store and click on the "Advanced Settings" tab in the left hand navigation bar.

2) Click on "API Accounts" tab in the left hand navigation bar.

3) Click on "Create API Account" button.

4) Name this API "criteo" and allow access to the "Products" endpoint.

5) Hit save and send us the file that was downloaded.

Tags¶

Steps¶

1) Click Storefront Design in the left panel

2) Click Script Manager

3) Click Create a Script

4) Copy the details from the code snippet below into the new script you created

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},
        { event: "setZipcode", zipcode: "{{customer.shipping_address.zip}}" }
    );
    switch("{{page_type}}") {
        case "product":
            window.criteo_q.push({ event : "viewItem", ecpplugin: "BigCommerce-Stencil", item: "{{product.id}}"});
            break;
        case "search":
            var CRTO_ListingArray = []; 
            {{#each category.products}}
                CRTO_ListingArray.push("{{id}}");
            {{/each}}
            window.criteo_q.push({ event : "viewSearchResult",
                                  ecpplugin: "BigCommerce-Stencil",
                                  keywords: "{{forms.search.query}}",
                                  item: CRTO_ListingArray
            });
            break;
        case "category":
            var CRTO_ListingArray = []; 
            {{#each category.products}}
                CRTO_ListingArray.push("{{id}}");
            {{/each}}
            window.criteo_q.push({ event : "viewList",
                                  ecpplugin: "BigCommerce-Stencil",
                                  category: "{{category.name}}",
                                  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;
        case "default":
              window.criteo_q.push({ event: "viewHome" , ecpplugin: "BigCommerce-Stencil" });
              break;
        default:
              window.criteo_q.push({ event: "viewPage" , ecpplugin: "BigCommerce-Stencil" });
    }
    window.addEventListener('load', function() {
  // ajax request catching
  (function(open) {
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        this.addEventListener("readystatechange", function() {
            try {
                if (this.readyState == 4 && url.includes("/cart/add")) {
                    crtoAddedItem = JSON.parse(this.response).data.cart_item.product_id;
                    $.getJSON("/api/storefront/carts", function(data) {
                        var crtoLineItems = data[0].lineItems.physicalItems;
                        for (var x in crtoLineItems) {
                            if (crtoLineItems[x].productId == crtoAddedItem){
                                var crtoAddToCartProducts = [];
                                crtoAddToCartProducts.push({
                                    'id': crtoLineItems[x].productId,
                                    'price': crtoLineItems[x].salePrice,
                                    'quantity': crtoLineItems[x].quantity,    
                                });
                              window.criteo_q.push({
                                  event: "addToCart",
                                  product: crtoAddToCartProducts
                              });
                            return;
                            }
                        }
                    });
                }
            } catch (err) {
                //do nothing
            }
        }, false);
        open.call(this, method, url, async, user, pass);
    };
  })(XMLHttpRequest.prototype.open);
}, false);
</script>

6) Hit save!

7) Click Create a Script

8) Copy the details from the image below into the new script you created
The "Script URL" in the image is: https://dynamic.criteo.com/js/ld/ld.js?a={{accountid}}

9) Hit save!

10) Click Create a Script

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

12) 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/{{checkout.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,
                        '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: "{{checkout.order.id}}", zipcode: CRTO_user_zipcode, item: CRTO_ConversionData}
        );
    });
</script> 

13) Hit save!

Verification¶

[[accurate]]