Shopify Integration

Follow these steps to add the pixel to your shopify store
first go to Themes on the Online Store tab on the sidebar
​
​
then click on the Actions button and select Edit code
​
​
then select the edit the theme.liquid file and the initialization code of the pixel
​
​
and it's recommended to add the initialization code at the head of the html document and add the PageView Event and the Popup to identify the anonymous users
  <script src="https://convertedin-pixel-sdk-v1.s3.amazonaws.com/sdk.js"></script>
  <script>
      ciq("init", "{your_pixel_key}");
    
      ciq("track", "PageView");
    
      ciq('popup', 1000);
  </script>
then in your products template or page add the ViewContent event
then capture the add to cart element and send the AddToCart Event
<script>
  var product = {{ product | json }};
  var productCollections = {{ product.collections | json }};
  
  // ViewContent
  ciq("track", "ViewContent", {
    content: [
      {
        id: product.id, // required
        quantity: 1, // required
        name: product.title, // optional
        category: productCollections[0]['title'] || '', // optional
      }
    ],
    currency: "EGP", // required
    value: product.price // required, sum of products price
  });
  
  var addToCartElm = document.querySelector('.product-form__cart-submit');
  
  addToCartElm.onclick = function(event) {
    // AddToCart
    ciq("track", "AddToCart", {
        content: [
            {
                id: product.id, // required
                quantity: 1, // required
                name: product.title, // optional
                category: productCollections[0]['title'] || '', // optional
            }
        ],
        currency: "USD", // required
        value: product.price // required
    });
  }
</script>
then add the InitiateCheckout Event on click at checkout button 
<script>
  var cart = {{ cart | json }};
  var originalCartItems = cart.items || {};
  var requestedCartItems = [];
  
  originalCartItems.forEach(function(item, index){
    var addedToCartObj = {id: null,quantity: 0, name:""};
    if(item.hasOwnProperty("id")) addedToCartObj.id = item.id;
    if(item.hasOwnProperty("quantity")) addedToCartObj.quantity = item.quantity;
    if(item.hasOwnProperty("title")) addedToCartObj.name = item.title;
​
    requestedCartItems.push(addedToCartObj);
  });
  
  var checkoutElm = document.querySelector('input[name="checkout"]');
  
  checkoutElm.onclick = function(event) {
    ciq("track", "InitiateCheckout", {
        content: requestedCartItems, // required
        currency: "USD", // required
        value: cart.total_price // required
    });
  }
</script>
to add the Purchase Event go to the settings > checkout > Order status page > Add tracking scripts and other customizations.
<script src="https://convertedin-pixel-sdk-v1.s3.amazonaws.com/sdk.js"></script>
<script>
(function() {
      ciq("init", "your_pixel_id");
      ciq("track", "Purchase", {
        content: [
             {% for line_item in line_items %}
             {
                   id: '{{ line_item.id }}',
                   name:  '{{ line_item.title }}',
                   quantity: {{ line_item.quantity }},
                   category: '{{ line_item..product.type }}',
             },
            {% endfor %}
       ],
        order_id: {{ order_number }}, // required
        currency: '{{ currency }}', // required
        value: {{ total_price | money_without_currency }} // required
      });
})();
</script>

Pixel - Previous

Client SDK

Last modified 4mo ago

Copy link