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!
Last modified 1mo ago
Copy link