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
1
  <script src="https://convertedin-pixel-sdk-v1.s3.amazonaws.com/sdk.js"></script>
2
  <script>
3
      ciq("init", "{your_pixel_key}");
4
    
5
      ciq("track", "PageView");
6
    
7
      ciq('popup', 1000);
8
  </script>
Copied!
then in your products template or page add the ViewContent event
then capture the add to cart element and send the AddToCart Event
1
<script>
2
  var product = {{ product | json }};
3
  var productCollections = {{ product.collections | json }};
4
  
5
  // ViewContent
6
  ciq("track", "ViewContent", {
7
    content: [
8
      {
9
        id: product.id, // required
10
        quantity: 1, // required
11
        name: product.title, // optional
12
        category: productCollections[0]['title'] || '', // optional
13
      }
14
    ],
15
    currency: "EGP", // required
16
    value: product.price // required, sum of products price
17
  });
18
  
19
  var addToCartElm = document.querySelector('.product-form__cart-submit');
20
  
21
  addToCartElm.onclick = function(event) {
22
    // AddToCart
23
    ciq("track", "AddToCart", {
24
        content: [
25
            {
26
                id: product.id, // required
27
                quantity: 1, // required
28
                name: product.title, // optional
29
                category: productCollections[0]['title'] || '', // optional
30
            }
31
        ],
32
        currency: "USD", // required
33
        value: product.price // required
34
    });
35
  }
36
</script>
Copied!
then add the InitiateCheckout Event on click at checkout button 
1
<script>
2
  var cart = {{ cart | json }};
3
  var originalCartItems = cart.items || {};
4
  var requestedCartItems = [];
5
  
6
  originalCartItems.forEach(function(item, index){
7
    var addedToCartObj = {id: null,quantity: 0, name:""};
8
    if(item.hasOwnProperty("id")) addedToCartObj.id = item.id;
9
    if(item.hasOwnProperty("quantity")) addedToCartObj.quantity = item.quantity;
10
    if(item.hasOwnProperty("title")) addedToCartObj.name = item.title;
11
​
12
    requestedCartItems.push(addedToCartObj);
13
  });
14
  
15
  var checkoutElm = document.querySelector('input[name="checkout"]');
16
  
17
  checkoutElm.onclick = function(event) {
18
    ciq("track", "InitiateCheckout", {
19
        content: requestedCartItems, // required
20
        currency: "USD", // required
21
        value: cart.total_price // required
22
    });
23
  }
24
</script>
Copied!
to add the Purchase Event go to the settings > checkout > Order status page > Add tracking scripts and other customizations.
1
<script src="https://convertedin-pixel-sdk-v1.s3.amazonaws.com/sdk.js"></script>
2
<script>
3
(function() {
4
      ciq("init", "your_pixel_id");
5
      ciq("track", "Purchase", {
6
        content: [
7
             {% for line_item in line_items %}
8
             {
9
                   id: '{{ line_item.id }}',
10
                   name:  '{{ line_item.title }}',
11
                   quantity: {{ line_item.quantity }},
12
                   category: '{{ line_item..product.type }}',
13
             },
14
            {% endfor %}
15
       ],
16
        order_id: {{ order_number }}, // required
17
        currency: '{{ currency }}', // required
18
        value: {{ total_price | money_without_currency }} // required
19
      });
20
})();
21
</script>
Copied!

Pixel - Previous

Client SDK

Last modified 1mo ago

Copy link