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 3dcart_feedexport

  2. Go to Products > Manage 3dcart_feedmanage

  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)
    • 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)

    3dcart_googlefeedmapping2

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

  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 3dcart_feedtime

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
  2. <!-- 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 -->
    
  3. Listing template > category_0.html
  4. 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–>
    

    3dcart_listingjs

    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||[]; prodlist.push("[catalogid]");
    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 -->
    
  5. Product/Quick-view Template > listing_0.html or quickview.html
  6. <!-- 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 -->
    
  7. Cart/Quick-view Template > view_cart.html or view_cart_quick.html
  8. 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-->
    

    3dcart_carttag_2

    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 = [];
    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 -->
    
  9. Order Confirmation Template > checkout-step4.html
  10. 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-->
    

    3dcart_conversiontag

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