Customerlabs CDP Documentation

You are here:

Google Tag Manager is a tag management system by Google that allows you to tag and insert code on your website to collect website events and send them to analytics platforms like GA4.

By connecting Google Tag Manager with CustomerLabs, you can install the CustomerLabs tracking code easily and start tracking your website events by setting up the tags with the help of our snippets given in this document.

Install tracking code

Authenticate your Google Tag Manager account and install the tracking code by following the steps below:

1. Login to your CustomerLabs account

2. On the Home page → Under Track Website Events → Click Google Tag Manager. You will be redirected to authenticate your Tag Manager account.

Google Tag Manager integration inside CustomerLabs CDP App to track website events including default eCommerce events.

3. After authentication, you will be asked to choose the tag manager account and container to install the CustomerLabs tracking code.

4. Once the GTag container is connected with CustomerLabs, the tracking code will be installed on the container.  

Note: Make sure you have already installed the connected GTag container on your website.

You can check the tag being created in your Tag Manager account with CustomerLabs tracking code.

Google Tag Manager tag configuration to insert CustomerLabs Code.

Tag Sequencing

Go to the Tags Menu in Google Tag Manager, Choose your Google Tag Advanced Settings Tag Sequencing.

Choose “Fire a tag before event fires” and select the tag from the below dropdown.

(Note: This step is essential as the Default Tracking code should be installed before installation of pixel script. This step is mandatory for tracking events like Purchases, Product Viewed, Checkout, and much more.)

Triggers & Tags

If you have already set up the triggers for any e-commerce events, you can use those triggers and create new tags with Custom HTML. You can then use the code snippets given below for tracking the default e-commerce events from the data layer.

If you haven’t set up any triggers, create new triggers based on the events that you want to track on your website from the data layer custom events, eg. view_item

GTM trigger configuration

Event to identify a user in the system

Create User event

Create User” event can be triggered to identify a user when the user submits a form, updates their contact information, etc, on your website.

You have to use “identify” call to select how you want to identify your users within CustomerLabs CDP. 

Whenever the identify method is called,  the “Create user” event is inside CustomerLabs for identification purposes inside the app. 

You can identify the users using email, phone, company, etc and also track additional user traits like first name, last name, address, etc.

For more details on how the identify call works, check out the detailed developer documentation

GTM code for triggering Create User

This is a sample code of how you can send user details. Make sure the user details object is pushed into the data layer in this format for the particular container (GTM-TAG-CODE).

You can also add other custom user fields if those are available in the data layer already.

<script>
    // SAMPLE USER-DETAILS
    var SampleUserDetailsFormat = {
        "id": 228089,
        "email": "[email protected]",
        "first_name": "xxxxxx",
        "last_name": "xxxxxxxx",
        "company": "yyyyyyyyy",
        "address1": "xxxxxxxxx",
        "address2": "yyyy",
        "address3": "yyyyyy",
        "city": "xxxxxxx",
        "state_id": 44,
        "code": "xxxxxxx",
        "printable_name": "United States",
        "international_state": "",
        "zip_code": "xxxxxx",
        "phone_number": "xxxxxxx",
        "is_def_addr": 0,
        "country_id": 226,
        "user_id": 201931,
        "country": {
            "id": 226,
            "name": "UNITED STATES",
            "printable_name": "United States",
            "iso3": "USA",
            "iso2": "US",
            "numcode": 840
        },
        "state": {
            "id": 44,
            "name": "Texas",
            "code": "TX"
        }
    }
        if(((window.CLabsgbVar || {}).generalProps || {}).uid){
            var address = google_tag_manager["GTM-TAG-CODE"].dataLayer.get("MAP-USER-DETAILS")
            if(address){
                var properties = {
                    "customProperties": {
                        "user_traits": {
                            "t": "Object",
                            "v": {
                                "first_name": {
                                    "t":"string",
                                    "v": address["first_name"]
                                },
                                "last_name": {
                                    "t":"string",
                                    "v": address["last_name"]
                                },                
                                "phone": {
                                    "t":"number",
                                    "v": address["phone_number"]
                                },
                                "email": {
                                    "t":"string",
                                    "v": address["email"]
                                },
                                "city": {
                                    "t":"string",
                                    "v": address["city"]
                                },
                                "postcode": {
                                    "t":"string",
                                    "v": address["zip_code"]
                                },
                                "country": {
                                    "t":"string",
                                    "v": address["country"]["name"]
                                },
                                "XXXX": { //Add Other user fields
                                    "t":"string",
                                    "v": "xxxxxx" // Map that field inside the object
                                },
                            }
                        },
                        "identify_by_email": {
                            "t":"string",
                            "v": address["email"],
                            "ib": true
                        }
                    }
                }
                _cl.identify(properties)
            }
        }

</script>

Default e-commerce events snippets

Product viewed

<script>
    function clProductsConversion(productsData){
        var products = [];
        for(var cli in  productsData){
            var product = productsData[cli];
            var newproduct = {};
            for(prodkey in product){
                switch(prodkey){
                case "id":
                    newproduct["product_id"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "name": 
                    newproduct["product_name"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "price":
                    newproduct["product_price"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "brand":
                    newproduct["product_brand"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "category":
                    newproduct["product_category"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "image":
                    newproduct["product_image"]= {
                      "t": "string",
                      "v": product[prodkey]
                    }
                default:
                    newproduct["product_" + prodkey] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                }
            }
            products.push(newproduct);
        }
        return products;
    };
    function getProductValue(productsData){
        var val = 0;
        for(var cli in  productsData){
            var product = productsData[cli];
            var qty = 1;
            if(product["quantity"]){
                try{
                    qty = Number(product["quantity"]);
                }catch(e){}
            }
            var price = Number(product["price"])
            var product_price = qty * price
            val = val + product_price 
        }
        return val
    };

        if(((window.CLabsgbVar || {}).generalProps || {}).uid){
            var ecommerceEvent = window.google_tag_manager["GTM-TAG-CODE"].dataLayer.get("ecommerce");
            var properties = {}
            var value = getProductValue(ecommerceEvent.detail.products)
            properties["customProperties"] = {
                "currency": {
                    "t": "string",
                    "v": ecommerceEvent["currencyCode"]
                },
                "content_type": {
                    "t": "string",
                    "v": "product_group"
                },
                "value":  {
                    "t": "number",
                    "v": value
                }
            }
            properties["productProperties"] = clProductsConversion(ecommerceEvent.detail.products)
            _cl.pageview("Product viewed", properties) 
        }
</script>

Added to cart

<script>
    function clProductsConversion(productsData){
        var products = [];
        for(var cli in  productsData){
            var product = productsData[cli];
            var newproduct = {};
            for(prodkey in product){
                switch(prodkey){
                case "id":
                    newproduct["product_id"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "name": 
                    newproduct["product_name"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "price":
                    newproduct["product_price"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "brand":
                    newproduct["product_brand"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "category":
                    newproduct["product_category"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "image":
                    newproduct["product_image"]= {
                      "t": "string",
                      "v": product[prodkey]
                    }
                default:
                    newproduct["product_" + prodkey] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                }
            }
            products.push(newproduct);
        }
        return products;
    };
    function getProductValue(productsData){
        var val = 0;
        for(var cli in  productsData){
            var product = productsData[cli];
            var qty = 1;
            if(product["quantity"]){
                try{
                    qty = Number(product["quantity"]);
                }catch(e){}
            }
            var price = Number(product["price"])
            var product_price = qty * price
            val = val + product_price 
        }
        return val
    };
        if(((window.CLabsgbVar || {}).generalProps || {}).uid){
            var ecommerceEvent = window.google_tag_manager["GTM-TAG-CODE"].dataLayer.get("ecommerce");
            var properties = {}
            var value = getProductValue(ecommerceEvent.add.products)
            properties["customProperties"] = {
                "currency": {
                    "t": "string",
                    "v": ecommerceEvent["currencyCode"]
                },
                "content_type": {
                    "t": "string",
                    "v": "product_group"
                },
                "value":  {
                    "t": "number",
                    "v": value
                }
            }
            properties["productProperties"] = clProductsConversion(ecommerceEvent.add.products)
            _cl.trackClick("Added to cart", properties)
        }
    
</script>

Checkout made

<script>
    function clProductsConversion(productsData){
        var products = [];
        for(var cli in  productsData){
            var product = productsData[cli];
            var newproduct = {};
            for(prodkey in product){
                switch(prodkey){
                case "id":
                    newproduct["product_id"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "name": 
                    newproduct["product_name"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "price":
                    newproduct["product_price"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "brand":
                    newproduct["product_brand"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "category":
                    newproduct["product_category"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "image":
                    newproduct["product_image"]= {
                      "t": "string",
                      "v": product[prodkey]
                    }
                default:
                    newproduct["product_" + prodkey] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                }
            }
            products.push(newproduct);
        }
        return products;
    };

    function getProductValue(productsData){
        var val = 0;
        for(var cli in  productsData){
            var product = productsData[cli];
            var qty = 1;
            if(product["quantity"]){
                try{
                    qty = Number(product["quantity"]);
                }catch(e){}
            }
            var price = Number(product["price"])
            var product_price = qty * price
            val = val + product_price 
        }
        return val
    };


        if(((window.CLabsgbVar || {}).generalProps || {}).uid){   
            var ecommerceEvent = window.google_tag_manager["GTM-TAG-CODE"].dataLayer.get("ecommerce");
            var properties = {}
            var value = getProductValue(ecommerceEvent.checkout.products)
            properties["customProperties"] = {
                "currency": {
                    "t": "string",
                    "v": ecommerceEvent.checkout["currencyCode"]
                },
                "content_type": {
                    "t": "string",
                    "v": "product_group"
                },
                "value":  {
                    "t": "number",
                    "v": value
                }
            }
            properties["productProperties"] = clProductsConversion(ecommerceEvent.checkout.products)
            _cl.trackClick("Checkout made", properties);   
        }
    
</script>

Removed from cart

<script>
    function clProductsConversion(productsData){
        var products = [];
        for(var cli in  productsData){
            var product = productsData[cli];
            var newproduct = {};
            for(prodkey in product){
                switch(prodkey){
                case "id":
                    newproduct["product_id"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "name": 
                    newproduct["product_name"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "price":
                    newproduct["product_price"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "brand":
                    newproduct["product_brand"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "category":
                    newproduct["product_category"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "image":
                    newproduct["product_image"]= {
                      "t": "string",
                      "v": product[prodkey]
                    }
                default:
                    newproduct["product_" + prodkey] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                }
            }
            products.push(newproduct);
        }
        return products;
    };
    function getProductValue(productsData){
        var val = 0;
        for(var cli in  productsData){
            var product = productsData[cli];
            var qty = 1;
            if(product["quantity"]){
                try{
                    qty = Number(product["quantity"]);
                }catch(e){}
            }
            var price = Number(product["price"])
            var product_price = qty * price
            val = val + product_price 
        }
        return val
    };

        if(((window.CLabsgbVar || {}).generalProps || {}).uid){   
            var ecommerceEvent = window.google_tag_manager["GTM-TAG-CODE"].dataLayer.get("ecommerce");
            var properties = {}
            var value = getProductValue(ecommerceEvent.remove.products)
            properties["customProperties"] = {
                "currency": {
                    "t": "string",
                    "v": ecommerceEvent["currencyCode"]
                },
                "content_type": {
                    "t": "string",
                    "v": "product_group"
                },
                "value":  {
                    "t": "number",
                    "v": value
                }
            }
            properties["productProperties"] = clProductsConversion(ecommerceEvent.remove.products)
            _cl.trackClick("Removed from cart", properties) 
        }
</script>

Purchased

<script>
    var clProductsConversion = function(productsData){
        var products = [];
        for(var cli in  productsData){
            var product = productsData[cli];
            var newproduct = {};
            for(prodkey in product){
                switch(prodkey){
                case "id":
                    newproduct["product_id"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "name": 
                    newproduct["product_name"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "price":
                    newproduct["product_price"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "brand":
                    newproduct["product_brand"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "category":
                    newproduct["product_category"] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                case "image_url":
                    newproduct["product_image"]= {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                default:
                    newproduct["product_" + prodkey] = {
                      "t": "string",
                      "v": product[prodkey]
                    }
                    break;
                }
            }
            products.push(newproduct);
        }
        return products;
    };
        if(((window.CLabsgbVar || {}).generalProps || {}).uid){
            var ecommerceEvent = window.google_tag_manager["GTM-TAG-CODE"].dataLayer.get("ecommerce");
            var properties = {};
            properties["customProperties"] = {
                "currency": {
                    "t": "string",
                    "v": ecommerceEvent["currencyCode"] || "USD"
                },
                "content_type": {
                    "t": "string",
                    "v": "product_group"
                },
                "value":  {
                    "t": "number",
                    "v": ecommerceEvent.purchase.actionField["revenue"]
                },
                "revenue":  {
                    "t": "number",
                    "v": ecommerceEvent.purchase.actionField["revenue"]
                },
                "shipping":  {
                    "t": "string",
                    "v": ecommerceEvent.purchase.actionField["shipping"]
                },
                "tax":  {
                    "t": "string",
                    "v": ecommerceEvent.purchase.actionField["tax"]
                },
                "transaction_id": {
                    "t": "string",      
                    "v": ecommerceEvent.purchase.actionField["id"]
                }
            }
            properties["productProperties"] = clProductsConversion(ecommerceEvent.purchase.products)
            _cl.pageview("Purchased", properties)
        }

</script>

B2B/Lead Gen events snippets

Complete Registration

if(window.CLabsgbVar && window.CLabsgbVar.generalProps){
        _cl.trackClick("CompleteRegistration");  
}

Contact form submitted

if(window.CLabsgbVar && window.CLabsgbVar.generalProps){
        _cl.trackClick("ContactFormSubmitted");  
}

Lead

if(window.CLabsgbVar && window.CLabsgbVar.generalProps){
        _cl.trackClick("Lead") 
}

Google Consent Mode v2

Google has updated the consent mode (V2) settings to help advertisers adhere to EU consent policy for use in ad personalization. 

If you’re using a Google Certified Consent Management Platform (CMP), your CMP would push the consent event in the dataLayer as shown below

Google Consent Mode v2 parameters ad_personalization granted, ad_user_data granted, analytics_storage granted

This should be sent to CustomerLabs by creating a new Custom HTML Tag (CL – Consent Tracking) with the script given below

Google Tag Manager showing consent mode v2 code to trigger CL consent tracking.
<script>
  if(((window.CLabsgbVar || {}).generalProps || {}).uid){
   var cdl = dataLayer || {};
   var consentEventData = {};
   for(var i in cdl){
       obj = cdl[i];
       for(var j in obj){
           if(obj[j] == "consent" && obj[1] == "update"){
               var consentProps = obj[2] || {};
               Object.assign(consentEventData, consentProps);
           }
       }
      
   }; 
   if(Object.keys(consentEventData).length > 0) {
       _cl.trackConsent(consentEventData);
   }
}
</script>

Set a trigger name – Consent Update

Trigger type – Custom Event  

Event name – cookie_consent_update

After setting this up, complete the Consent mode Setup for Google Ads and Google Analytics (GA4) by referring to the respective documentation.

Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
5
How can we improve this article?
How Can We Improve This Article?
Need help?
Table of Contents
CustomerLabs gives freedom, flexibility and wings to digital marketers.
Sign Up

Schedule a 1-1 Demo

Ecommerce

Unified data to boost ecommerce growth

B2B

Engage your customers across the funnel with a unified martech stack

SaaS
Saas

Increase product metrics with a unified martech stack

Agency
Agency

Scale your customers quickly with the right data