Other language

STEP 1

This document explains the different methods to integrate your website with Carts Guru. The idea is to “push” your shopping carts and orders to our retargeting system. This documentation suggests the best models to establish a secured connection.

 Carts Tracking 

Use our API to send carts from checkout

 Orders Tracking 

Use our API to send orders on confirmation page

STEP 2

 Frontend Script 

To enable Facebook Messenger retargeting feature or other online feature, you should add the following script on your frontend.

This tag will add Facebook Messenger checkbox under you add to cart button if you do not use any widget on https://carts.guru. If you do have widgets to capture your client opt-in we will automatically display it on your website once Facebook Messenger will be used in your retargeting strategy.

The tag must be set on every page but the init will be a little bit different regarding the context of the page. The cart should be define when your visitor has added something in his cart.

As of today, the product and order is not required if you are already using the API logic to send identified carts.

In order to position our widget and to bind them to the proper button, you will have to add the class 'cg-fb-optin' for this specific button.

Default

<script>
  function cgAsyncInit() {
    // INIT
    CG('init');
  }

  (function (d, s, id) {
    if (d.getElementById(id)) return;
    var t = d.getElementsByTagName(s)[0];
    var cgs = d.createElement(s);
    cgs.id = id;
    cgs.src = 'https://t.carts.guru/bundle.js?sid={{SITE_ID}}';
    t.parentNode.insertBefore(cgs, t);
    cgs.onload = cgAsyncInit;
  }(document, 'script', 'cg-bundle'));
</script>

Cart - Customer Not logged In

<script>
  function cgAsyncInit() {
    // For your information: '' represents string and 0 represents integer
    var cart = {
      id: '', //Cart identifier
      totalATI: 0, 
      totalET: 0,
      recoverUrl: '', //Link to recover the cart. If you do not have a way to recover the cart the best will be to send the url to the checkout page
      currency: '', //Ex: 'USD' or 'EUR'
      ip: '', //Required only if you need to exclude ip adress from your retargating system
      buyerAcceptsMarketing: true, //Not required. Did the customer accept to be retargeted ? 
      countryCode: '', 	// (Required) if you send any phone number. Country ISO code of the buyer, 2 or 3 letters.
      items: [{
        id: '',
        label: '',
        quantity: 0,
        totalATI: 0,
        totalET: 0,
        url: '',
        imageUrl: '',
        category: '', //Not required
        universe: '' //Not required
      }],
      custom: {} //Any other property that you might want to segment on. One example could be isNewCustomer: true OR false
    };
    
    // INIT
    CG('init', {
      cart: cart
    });
  }

  (function (d, s, id) {
    if (d.getElementById(id)) return;
    var t = d.getElementsByTagName(s)[0];
    var cgs = d.createElement(s);
    cgs.id = id;
    cgs.src = 'https://t.carts.guru/bundle.js?sid={{SITE_ID}}';
    t.parentNode.insertBefore(cgs, t);
    cgs.onload = cgAsyncInit;
  }(document, 'script', 'cg-bundle'));
</script>

Cart - Customer logged In

<script>
  function cgAsyncInit() {
    // For your information: '' represents string and 0 represents integer
    var cart = {
      id: '', //Cart identifier
      email: '',
      phoneNumber: '',
      accountId: '', //Unique identified of the customer. Using emails address here is great
      firstname: '',
      lastname: '',
      totalATI: 0, 
      totalET: 0,
      recoverUrl: '', //Link to recover the cart. If you do not have a way to recover the cart the best will be to send the url to the checkout page
      currency: '', //Ex: 'USD' or 'EUR'
      ip: '', //Required only if you need to exclude ip adress from your retargating system
      buyerAcceptsMarketing: true, //Not required. Did the customer accept to be retargeted ?
      language: '',    // (optional) language of the customer, can be different from the country: ISO code and lower case ex: en,fr,es.
      countryCode: '', 	// (Required) if you send any phone number. Country ISO code of the buyer, 2 or 3 letters.
      items: [{
        id: '',
        label: '',
        quantity: 0,
        totalATI: 0,
        totalET: 0,
        url: '',
        imageUrl: '',
        category: '', //Not required
        universe: '' //Not required
      }],
      custom: {} //Any other property that you might want to segment on. One example could be isNewCustomer: true OR false
    };
    
    // INIT
    CG('init', {
      cart: cart
    });
  }

  (function (d, s, id) {
    if (d.getElementById(id)) return;
    var t = d.getElementsByTagName(s)[0];
    var cgs = d.createElement(s);
    cgs.id = id;
    cgs.src = 'https://t.carts.guru/bundle.js?sid={{SITE_ID}}';
    t.parentNode.insertBefore(cgs, t);
    cgs.onload = cgAsyncInit;
  }(document, 'script', 'cg-bundle'));
</script>

Order confirmation

<script>
  function cgAsyncInit() {
    // For your information: '' represents string and 0 represents integer
    var order = {
      id: '',
      cartId: '',
      totalATI: 0,
      totalET: 0,
      currency: '',
      state: '',      //Status of the order
      accountId: '', //Email address
      email: '',
      countryCode: '', 	// (Required) if you send any phone number. Country ISO code of the buyer, 2 or 3 letters.

      items: [{ 
        id: '',	 	    // SKU or product id
        label: '', 		// Designation 
        quantity: 0, 	// Count 
        totalATI: 0, 	// Total price included taxes
        totalET: 0, 	// Total price excluded taxes
        url: '', 		// URL of product sheet
        imageUrl: '',	// Image URL of the  product, size should be min 150*150, max 180*180				
 	 }] 
    };
    
    // INIT
    CG('init', {
      order: order,
      //we don't set cart on confirmation page, because cart is now empty
    });
  }

  (function (d, s, id) {
    if (d.getElementById(id)) return;
    var t = d.getElementsByTagName(s)[0];
    var cgs = d.createElement(s);
    cgs.id = id;
    cgs.src = 'https://t.carts.guru/bundle.js?sid={{SITE_ID}}';
    t.parentNode.insertBefore(cgs, t);
    cgs.onload = cgAsyncInit;
  }(document, 'script', 'cg-bundle'));
</script>