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>
Last modified 1yr ago