3DCart¶

A guide to implement Criteo solutions in 3DCart.

Overview¶

This tutorial will explain how to generate Google Shopping Feed and install Criteo OneTag on your 3D Cart site.

[[disclaimer-nonplugin]]

Feed¶

3D Cart does have parent-child structure so it is recommended to use 3D Cart's internal product ID rather than the product ID generated elsewhere

1. Export/ Import

   Go to **Products > Product List > Export / Import**
   

   

2. Go to Products > Manage

3. Create a new export by clicking Add New

4. Match fields using Criteo Product Feed Specification

   The default columns is below but depending on your needs you may add additional columns to the export:

   • name (alias: title)
   • url_link (alias: link)
   • image1thumbnail (alias: image_link) NOTE: please make sure you insert the site's home URL as Prefix.
   • description (alias: description)
   • price (alias: price)
   • catalogid (alias: id)
   • saleprice (alias: sale_price)
   • instock_message (alias: availability)
   • categories (alias: product_type)
   • constant for static value (optional)

   

5. Schedule your export. Go to Products > Choose your export under "Custom Export Sets" > Schedule

6. Generate Feed Link http://www.domain.com/assets/exports/filename.csv

   Under **Scheduled Exports**, choose checkbox **Enable**, enter the file name. Under **Action** choose the first option **Save File**
   

   

Tags¶

To access the website's theme, go to Settings > Design > Themes & Styles. The click Edit Template (HTML).

The individual templates are:

• Homepage: home.html
• Listing pages:typically category_0.html, but you may have more than 1 template for category pages.
• Product pages:typically listing_0.html, but you may have more than 1 template for product pages.
• Product pages(quick view): quickview.html
• Cart/Basket pages: view_cart.html
• Cart/Basket pages (quick view popup): view_cart_quick.html
• Order Confirmation page: It is checkout-step4.html if it's a 4-step checkout system.

Steps¶

1. Homepage template > home.html

<!-- Criteo Homepage Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
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: "setSiteType", type: deviceType },
    { event: "setEmail", email: "" },
    { event: "viewHome", ecpplugin: "3dcart" }
);
</script>
<!-- END Criteo Home Page Tag -->

2. Listing template > category_0.html
You need to populate the product IDs on the page as either HTML or a JavaScript variable utilizing the macro **[catalogid]**. The listing loop is generally sitting within the section with the following START and END comments. You can add the following code within the listing loop to build an array of product IDs in JavaScript:

<!--START: CATEGORY_ITEMS-->
<!--START: ITEM_TEMPLATE_0–->
<script> var prodlist = prodlist||[]; prodlist.push("[catalogid]"); </script>
<!--END: ITEM_TEMPLATE_0-->
<!--END: CATEGORY_ITEMS–>

Then copy the following tags:

<!-- Criteo Listing Page Tag -->
<script
    type="text/javascript"
    src="//static.criteo.net/js/ld/ld.js"
    async="true"
></script>
<script type="text/javascript">
    var prodlist = prodlist||[];
    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: "setSiteType", type: deviceType },
        { event: "setEmail", email: "" },
        { event: "viewList", ecpplugin: "3dcart", item: prodlist  }
    );
</script>
<!-- END Criteo Listing Page Tag -->

3. Product/Quick-view Template > listing_0.html or quickview.html

<!-- Criteo Product Page Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
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: "setSiteType", type: deviceType },
    { event: "setEmail", email: "" },
    { event: "viewItem", ecpplugin: "3dcart", item:  "[catalogid]" }
);
</script>
<!-- END Criteo Product Page Tag -->

4. Cart/Quick-view Template > view_cart.html or view_cart_quick.html
Similar to listing tag, you need to build the product array within the cart item loop of the HTML, which is within the section of the following START and END comment:

<!--START: SHOPPING_CART_ITEM-->
<script> var cartData = cartData||[]; cartData.push({id: "[catalogid]", price: ("[ITEM_PRICE]").replace('$',''), quantity: [ITEM_QUANTITY] }); </script>
<!--END: SHOPPING_CART_ITEM-->

Then copy the following tags:

<!-- Criteo Product Basket Tag -->
<script
    type="text/javascript"
    src="//static.criteo.net/js/ld/ld.js"
    async="true"
></script>
<script type="text/javascript">
    var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
    var cartData = cartData || [];
    jQuery( document ).ready(function() {
        window.criteo_q = window.criteo_q || [];
        window.criteo_q.push(
        { event: "setAccount", account: {{accountid}}},
        { event: "setSiteType", type: deviceType },
        { event: "viewBasket", ecpplugin: "3dcart", item: cartData });
    });
</script>
<!-- END Criteo Basket Page Tag -->

5. Order Confirmation Template > checkout-step4.html
Similar to listing and cart tags, you need to build the product array within the following START and END comment:

<!--START: items-->
<script> var orderData=orderData||[]; orderData.push({ id: "[catalogid]", price: ("[unitprice]").replace('$',''), quantity: "[numitems]" }); </script>
<!--END: items-->

Then copy the following tags

<!-- Criteo Sales Page Tag -->
<script
    type="text/javascript"
    src="//static.criteo.net/js/ld/ld.js"
    async="true"
></script>
<script type="text/javascript">
    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: "setSiteType", type: deviceType },
    { event: "setEmail", email: "[oemail]"},
    { event: "trackTransaction", ecpplugin: "3dcart", id: "[invoicenum]" , item: orderData });
</script>
<!-- END Criteo Sales Page Tag -->

Verification¶

[[accurate]]