Customerlabs CDP Documentation
Breeze is a popular one-click checkout platform that helps improve eCommerce conversions, but many users face challenges with event tracking and data accuracy on Meta. Customers often experience duplicated purchase counts and discrepancies in Meta Ads reporting due to duplicated pixel firing and browser limitations affecting client-side tracking.
By leveraging CustomerLabsโ first-party data (1PD) platform, businesses can implement server-side tracking via Metaโs Conversions API, overcoming Breezeโs native tracking restrictions. This ensures more accurate event data, reduces data loss, and improves ad attribution and campaign optimization on Meta and Google Ads.
Prerequisites:
Before proceeding, ensure you have the necessary access, including administrative access to your website or Shopify store, a Google Tag Manager account, and credentials for CustomerLabs and Breeze Integrations.
Google Tag Manager (GTM) Setup
Step 1: Check if GTM is already present on your website
- Right-click on your website and click Inspect.
- Go to the Console tab and search for google_tag_manager.
- If GTM is installed, you’ll see the following pattern, GTM-XXXXXX in the console.
Step 2: If GTM is not present on your website
- Create a GTM account. (Refer to the attached document for GTM setup instructions.)
- Once your account is created, go to the Home page and click on your Container ID.
- A pop-up will appear showing the GTM installation code, and copy the first code snippet shown.
Step 3: Paste the GTM Code into Your Website
For general websites: Paste the copied code below the <head> tag.
For Shopify:
- Go to Sales Channel > Online Store > Themes > Edit Code.
- Search for the <head> tag in the theme. liquid file.
- Paste the GTM code just below the <head> tag.
- Save your changes.
Step 4: Verify Installation
- Reload your website and check again in the Console (Inspect > Console > search google_tag_manager) to confirm that GTM is properly installed as mentioned in the docs above.
Step 5: Data Layer Enablement/Verification
- Kindly raise a ticket with your One Click Checkout provider to push the eventsโInitiate Checkout, Add Payment Info, and Purchaseโinto the datalayer.
- Once the prerequisite setup is complete, perform a test flow on your website, from page view to purchase, using breeze.
- Right-click anywhere on your website and select Inspect.
- Go to the Console tab.
- Type dataLayer and press Enter.
- You should be able to see the list of events being pushed into the data layer.
Step-6 Configuring the breeze events(Checkout):
6.1 Go to GoogleTagMangerโTagsโNew Tag.
6.2 Name the tag as โCL _initiate_checkoutโ and click on the tag configuration, and
Choose custom HTML and paste the code which is given below:
<script>
function clProductsConversion(productsData){
var products = [];
for(var cli in productsData){
var product = productsData[cli];
var newproduct = {};
for(prodkey in product){
switch(prodkey){
case "item_id":
newproduct["product_id"] = {
t: "string",
v: product[prodkey]
};
break;
case "item_name":
newproduct["product_name"] = {
t: "string",
v: product[prodkey]
};
break;
case "price":
newproduct["product_price"] = {
t: "number",
v: product[prodkey]
};
break;
case "item_brand":
newproduct["product_brand"] = {
t: "string",
v: product[prodkey]
};
break;
case "item_category":
newproduct["product_category"] ={
t: "string",
v: product[prodkey]
};
break;
case "quantity":
newproduct["product_qty"]= {
t: "number",
v: product[prodkey]
}
break;
case "item_variant":
newproduct["product_variant"] = {
t: "string",
v: product[prodkey]
}
break;
case "coupon":
newproduct["coupon"] = {
t: "number",
v: product["coupon"]
}
break;
}
}
products.push(newproduct);
}
return products;
};
if (((window.CLabsgbVar || {}).generalProps || {}).uid) {
var data = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("ecommerce");
var properties = {}
if (data) {
properties["customProperties"] = {
"currency": {
"t": "string",
"v": (data.currency || "INR")
},
"value":{
"t": "number",
"v": data.value,
},
"coupon": {
"t": "string",
"v": data.coupon,
},
"content_type": {
"t": "string",
"v": "product_group"
}
}
properties["productProperties"] = clProductsConversion(data.items)
_cl.trackClick("Checkout made", properties)
}
}
</script>6.3: Note: Kindly update the container-ID in the code
6.4 Add the trigger, click on the new button, choose the trigger type as custom event, name the trigger as cl_initae_checkout, and the event name should be checkout-init, and save changes.
Step-7 Configuring the breeze events(Payment Screen):
7.1 Go to GoogleTagMangerโTagsโNew Tag.
7.2 Name the tag as โCL_payment_screentโ and click on the tag configuration, and
Choose custom HTML and paste the code which is given below:
<script>
function clProductsConversion(productsData){
var products = [];
for(var cli in productsData){
var product = productsData[cli];
var newproduct = {};
for(prodkey in product){
switch(prodkey){
case "item_id":
newproduct["product_id"] = {
t: "string",
v: product[prodkey]
};
break;
case "item_name":
newproduct["product_name"] = {
t: "string",
v: product[prodkey]
};
break;
case "price":
newproduct["product_price"] = {
t: "number",
v: product[prodkey]
};
break;
case "item_brand":
newproduct["product_brand"] = {
t: "string",
v: product[prodkey]
};
break;
case "item_category":
newproduct["product_category"] ={
t: "string",
v: product[prodkey]
};
break;
case "quantity":
newproduct["product_qty"]= {
t: "number",
v: product[prodkey]
}
break;
case "item_variant":
newproduct["product_variant"] = {
t: "string",
v: product[prodkey]
}
break;
case "coupon":
newproduct["coupon"] = {
t: "number",
v: product["coupon"]
}
break;
}
}
products.push(newproduct);
}
return products;
};
if (((window.CLabsgbVar || {}).generalProps || {}).uid) {
var data = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("ecommerce");
var properties = {}
if (data) {
properties["customProperties"] = {
"currency": {
"t": "string",
"v": (data.currency || "INR")
},
"value":{
"t": "number",
"v": data.value,
},
"coupon": {
"t": "string",
"v": data.coupon,
},
"transaction_id": {
"t": "string",
"v" : data.transaction_id,
},
"paymentType":{
"t": "string",
"v" : data.paymentType,
},
"content_type": {
"t": "string",
"v": "product_group"
}
}
properties["productProperties"] = clProductsConversion(data.items)
_cl.trackClick("AddPaymentInfo", properties)
}
}
var first_name = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("first_name");
var last_name = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("last_name");
var email = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("email");
var city = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("city");
var state = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("state");
var phone = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("phone_num");
var pincode = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("pincode");
var customProperties = {
user_traits: {
"t": "object",
"v": {
"first_name": {
"t": "string",
"v": first_name
},
"last_name": {
"t": "string",
"v": last_name
},
"phone": {
"t": "string",
"v": phone
},
"email": {
"t": "string",
"v": email
},
"city":{
"t": "string",
"v": city,
},
"state":{
"t": "string",
"v": state,
},
"pincode":{
"t": "string",
"v": pincode,
}
}
}
}
if(email && email != null && email != ""){
customProperties["identify_by_email"] ={
"t":"string",
"v": email,
"ib": true
}
if(phone && phone != null && phone != ""){
customProperties["external_ids"] = {
"t": "Object",
"v": {
"identify_by_phone": {
"t":"string",
"v": phone
}
}
}
}
}else if(phone && phone != null && phone != ""){
customProperties["identify_by_phone"] = {
"t":"string",
"v": phone,
"ib": true
}
}
var properties = {
customProperties: customProperties
}
if (phone || email) {
_cl.identify(properties);
}
</script>7.3: Note: Kindly update the container-ID in the code
7.4 Add the trigger, click on the new button, choose the trigger type as custom event, name the trigger as cl_payment_screen, and the event name should be
payment-screen, and save changes.
Step-8 Configuring the breeze events(Purchased):
8.1 Go to GoogleTagMangerโTagsโNew Tag.
8.2 Name the tag as โCL_purchasedโ and click on the tag configuration and
Choose custom HTML and paste the code which is given below:
<script>
function clProductsConversion(productsData){
var products = [];
for(var cli in productsData){
var product = productsData[cli];
var newproduct = {};
for(prodkey in product){
switch(prodkey){
case "item_id":
newproduct["product_id"] = {
t: "string",
v: product[prodkey]
};
break;
case "item_name":
newproduct["product_name"] = {
t: "string",
v: product[prodkey]
};
break;
case "price":
newproduct["product_price"] = {
t: "number",
v: product[prodkey]
};
break;
case "item_brand":
newproduct["product_brand"] = {
t: "string",
v: product[prodkey]
};
break;
case "item_category":
newproduct["product_category"] ={
t: "string",
v: product[prodkey]
};
break;
case "quantity":
newproduct["product_qty"]= {
t: "number",
v: product[prodkey]
}
break;
case "item_variant":
newproduct["product_variant"] = {
t: "string",
v: product[prodkey]
}
break;
case "coupon":
newproduct["coupon"] = {
t: "number",
v: product["coupon"]
}
break;
}
}
products.push(newproduct);
}
return products;
};
if (((window.CLabsgbVar || {}).generalProps || {}).uid) {
var data = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("ecommerce");
var properties = {}
if (data) {
properties["customProperties"] = {
"currency": {
"t": "string",
"v": (data.currency || "INR")
},
"value":{
"t": "number",
"v": data.value,
},
"transaction_id": {
"t": "string",
"v" : data.transaction_id,
},
"coupon": {
"t": "string",
"v": data.coupon,
},
"content_type": {
"t": "string",
"v": "product_group"
}
}
properties["productProperties"] = clProductsConversion(data.items)
_cl.trackClick("Purchased", properties)
}
}
var first_name = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("first_name");
var last_name = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("last_name");
var email = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("email");
var city = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("city");
var state = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("state");
var phone = window.google_tag_manager["GTM-ABCDEFGH"].dataLayer.get("phone_num");
var customProperties = {
user_traits: {
"t": "object",
"v": {
"first_name": {
"t": "string",
"v": first_name
},
"last_name": {
"t": "string",
"v": last_name
},
"phone": {
"t": "string",
"v": phone
},
"email": {
"t": "string",
"v": email
},
"city":{
"t": "string",
"v": city,
},
"state":{
"t": "string",
"v": state,
},
}
}
}
if(email && email != null && email != ""){
customProperties["identify_by_email"] ={
"t":"string",
"v": email,
"ib": true
}
if(phone && phone != null && phone != ""){
customProperties["external_ids"] = {
"t": "Object",
"v": {
"identify_by_phone": {
"t":"string",
"v": phone
}
}
}
}
}else if(phone && phone != null && phone != ""){
customProperties["identify_by_phone"] = {
"t":"string",
"v": phone,
"ib": true
}
}
var properties = {
customProperties: customProperties
}
if (phone || email) {
_cl.identify(properties);
}
</script>8.3: Note: Kindly update the container ID in the code
8.4 Add the trigger, click on the new button, choose the trigger type as custom event, name the trigger as cl_purchase, and the event name should be order-placed, and save changes.
Step 09: Publish the Code:
- Once the code has been placed in the respective tags, make sure to publish the changes in Google Tag Manager to activate the setup on your website.
Step 10: GTM Trigger Audit:
- After publishing the code, click on the Preview button in Google Tag Manager and perform actions on the website โ from page view to purchase.
- This will open GTM in preview mode, where youโll be able to verify whether the configured tags (like cl_purchase, cl_payment_screen, etc.) are being triggered correctly during user actions on the website.
Step 11: Events Audit:
- Once the code has been published and tested in Preview mode, and you start receiving the purchase events, you will be able to see them in CustomerLabs.
- To check the events: Go to CustomerLabs โ Monitoring โ Event Manager
Here, you can verify if the purchase and other configured events are being successfully received.
โ—————————————————————————————
