Add zubi liquid
Last updated
Last updated
For clients using a theme that doesn't support App Embed you will need to create a separate liquid. Please follow the steps below.
Login to Shopify Admin and go to OnlineStore-> Themes-> Edit Code
Create a new liquid within the Snippet section and name it zubi-script-app
Add the following code into the liquid and save
<script>
window.zlt_queue||(window.zlt_queue=[]),window.zlt_queue2||(window.zlt_queue2=[]),window.zlt=function(){},window.zlt.rec=function(a,b,c){window.zlt_queue2.push({p:a,k:b,d:c})},window.zlt.track=function(a,b){var c={};c[a]=b,window.zlt_queue.push(c)};function zlsetCookie(f,a,b){var c="";if(b){var g=new Date;g.setTime(g.getTime()+1e3*(60*(60*(24*b)))),c="; expires="+g.toUTCString()}document.cookie=f+"="+(a||"")+c+"; path=/"}function zlgetCookie(c){for(var a,g=c+"=",d=document.cookie.split(";"),e=0;e<d.length;e++){for(a=d[e];" "==a.charAt(0);)a=a.substring(1,a.length);if(0==a.indexOf(g))return a.substring(g.length,a.length)}return null}
</script>
<script data-script="zubi-liquid" src="https://assets.zubitracker.io/v1/tracker/js/zubi_script.js" > </script>
{% if cart.items %}
<script>
fetch('/cart.js')
.then(response => response.json())
.then(data => {
var zlGlobalCartArray = [];
var zlCookie = !zlgetCookie("zlCartsArray") ? '' : zlgetCookie("zlCartsArray");
var zlGlobalCartMap = {};
var prodsArray = {};
var removedArray = [];
var zlCartTk = !zlgetCookie("zlCartTk") ? '' : zlgetCookie("zlCartTk");
if(zlCartTk == ''){
zlsetCookie("zlCartTk" , data.token , 326 );
}else{
console.log(zlCartTk != data.token)
if(zlCartTk != data.token){
zlsetCookie("zlCartTk" , data.token , 326 );
}
}
if(zlgetCookie("zlCartsArray")){
zlCookie = JSON.parse(zlgetCookie("zlCartsArray"));
}
{% for products in cart.items %}
var x = {
product_id: {{products.product.id}},
product_type: "{{products.product.type}}",
name: "{{products.product.title}}",
brand: "{{products.product.vendor}}",
variant: "{{products.product.selected_or_first_available_variant.title}}",
variant_id: "{{ products.product.selected_or_first_available_variant.id }}",
price: {{ products.product.price }},
quantity : {{ products.quantity }},
url: "{{ products.product.url }}",
image_url: "{{ products.product.featured_image.src | img_url: 'grande' }}",
};
prodsArray[{{products.product.id}}] = { quantity : {{ products.quantity }} , val : x };
zlGlobalCartMap[{{products.product.id}}] = x;
zlGlobalCartArray.push(x);
{% endfor %}
if(zlGlobalCartArray.length == 0){
document.cookie = "zlCartsArray" +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}else{
zlsetCookie("zlCartsArray" , JSON.stringify(zlGlobalCartMap) , 326 );
}
if(zlCartTk != data.token){
document.cookie = "zlCartsArray" +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
setTimeout(function(){
if(typeof(zlCookie) != "undefined" && zlCartTk == data.token){
if(zlGlobalCartArray.length > 0 && Object.keys(zlCookie).length > 0 ){
zlGlobalCartArray.forEach(function(val,ind){
if(typeof(zlCookie[val.product_id]) === 'undefined')
zlt.track("Added to Cart", val );
else if(zlCookie[val.product_id].quantity < val.quantity )
zlt.track("Added to Cart", val );
else if(zlCookie[val.product_id].quantity > val.quantity)
zlt.track("Removed from Cart", val );
});
}
for (var products of Object.keys(zlCookie))
{
if(typeof(zlGlobalCartMap[products]) == "undefined"){
zlt.track("Removed from Cart", zlCookie[products] );
}
}
}
if(zlGlobalCartArray.length > 0 && zlCookie == ""){
zlGlobalCartArray.forEach(function(val,ind){
zlt.track("Added to Cart", val );
});
}
},10);
{% if request.page_type == 'cart' %}
zlt.track("Cart Viewed", {
cart_id : data.token,
products : zlGlobalCartArray
});
{% endif %}
});
</script>
{% endif %}
{% if customer.id %}
<script>
zlt.track('user', {
'user_id':{{customer.id}},
'email':"{{ customer.email }}",
'first_name':"{{ customer.first_name }}",
'last_name':"{{ customer.last_name }}"
});
</script>
{% endif %}
{% if request.page_type == 'collection' or request.page_type == 'list-collections' %}
{%- assign limit = 8 -%}
{% paginate collection.products by limit %}
{% for product in collection.products %}
<script>
zlt.track('Product Seen', {
product_id: "{{product.id}}" ,
category: "{{collection.title}}",
product_type: "{{product.type}}",
name: "{{product.title}}",
brand: "{{product.vendor}}",
variant: "{{product.selected_or_first_available_variant.title}}",
variant_id: "{{ product.selected_or_first_available_variant.id }}",
price: {{ product.price }},
currency: "{{shop.currency}}",
url: "{{ product.url }}",
image_url: "{{ product.featured_image.src | img_url: 'grande' }}",
});
</script>
{% endfor %}
{% endpaginate %}
{% endif %}
{% if checkout %}
<script>
var line_items = [];
{% for product in checkout.line_items %}
line_items.push({
product_id: "{{product.product_id}}",
variant_id: "{{product.variant_id}}",
sku: "{{product.sku}}",
name: "{{product.title}}",
price: {{product.unit_price}},
quantity: {{product.quantity}},
image_url: "{{product.image_url}}",
gift_card: "{{product.gift_card}}",
requires_shipping: "{{product.requires_shipping}}",
brand: "{{product.vendor}}",
taxable: "{{product.taxable}}"
});
{% endfor %}
zlt.track('Order Completed', {
email: "{{ checkout.email }}",
billing_address_first_name: "{{ checkout.billing_address.first_name }}",
billing_address_last_name: "{{ checkout.billing_address.last_name }}",
billing_address_company: "{{ checkout.billing_address.company }}",
billing_address_zip: "{{ checkout.billing_address.zip }}",
billing_address_phone: "{{ checkout.billing_address.phone }}",
billing_address_address1: "{{ checkout.billing_address.address1 }}",
billing_address_address2: "{{ checkout.billing_address.address2 }}",
billing_address_city: "{{ checkout.billing_address.city }}",
billing_address_province: "{{ checkout.billing_address.province }}",
billing_address_province_code: "{{ checkout.billing_address.province_code }}",
billing_address_country: "{{ checkout.billing_address.country }}",
billing_address_country_code: "{{ checkout.billing_address.country_code }}",
shipping_address_first_name: "{{ checkout.shipping_address.first_name }}",
shipping_address_last_name: "{{ checkout.shipping_address.last_name }}",
shipping_address_company: "{{ checkout.shipping_address.company }}",
shipping_address_zip: "{{ checkout.shipping_address.zip }}",
shipping_address_phone: "{{ checkout.shipping_address.phone }}",
shipping_address_address1: "{{ checkout.shipping_address.address1 }}",
shipping_address_address2: "{{ checkout.shipping_address.address2 }}",
shipping_address_city: "{{ checkout.shipping_address.city }}",
shipping_address_province: "{{checkout.shipping_address.province }}",
shipping_address_province_code: "{{ checkout.shipping_address.province_code }}",
shipping_address_country: "{{ checkout.shipping_address.country }}",
shipping_address_country_code: "{{ checkout.shipping_address.country_code }}",
order_id: "{{ checkout.order_id }}",
checkout_id: "{{ checkout.id }}",
payment_method: '',
total: "{{ checkout.total_price }}",
subtotal: "{{ checkout.subtotal_price }}",
shipping: "{{ shipping_rate_price }}",
tax: "{{ checkout.total_tax }}",
discount: "{{ checkout.discount }}",
coupons: "{{ checkout.gift_cards }}",
currency: "{{ checkout.currency }}",
products: line_items,
created_at: "{{ checkout.created_at }}",
updated_at: "{{ checkout.updated_at }}"
});
</script>
{% endif %}
{% if request.page_type == 'search' %}
<script>
var line_items = [];
{% for product in search.results %}
{% if item.object_type == 'product' %}
line_items.push({
product_id: "{{product.id}}" ,
category: "{{collection.title}}",
product_type: "{{product.type}}",
name: "{{product.title}}",
brand: "{{product.vendor}}",
variant: "{{product.selected_or_first_available_variant.title}}",
variant_id: "{{ product.selected_or_first_available_variant.id }}",
price: {{ product.price }},
currency: "{{shop.currency}}",
url: "{{ product.url }}",
image_url: "{{ product.featured_image.src | img_url: 'grande' }}",
});
{% endif %}
{% endfor %}
{% if item.object_type == 'product' %}
zlt.track('Products Searched', {
query: "{{ search.terms }}",
products : line_items
});
{% endif %}
</script>
{% endif %}
{% if request.page_type == 'product' %}
<script>
zlt.track('Product Viewed', {
product_id: "{{product.id}}" ,
category: "{{collection.title}}",
product_type: "{{product.type}}",
name: "{{product.title}}",
brand: "{{product.vendor}}",
variant: "{{product.selected_or_first_available_variant.title}}",
variant_id: "{{ product.selected_or_first_available_variant.id }}",
price: {{ product.price }},
currency: "{{shop.currency}}",
url: "{{ product.url }}",
image_url: "{{ product.featured_image.src | img_url: 'grande' }}",
});
</script>
{% endif %}
{% if page %}
<script>
zlt.track('Page Viewed', {
page_type: "{{ request.page_type }}",
page_id : {{page.id}},
page_title : "{{ page.title }}",
page_url : "{{ page.url }}",
});
</script>
{% endif %}
Open the theme.liquid and add the following code at the start of the <body> section.
{% render 'zubi-script-app' %}All done
