Customerlabs CDP Documentation
Track and send Typeforms effectively to Ad platforms!
However, a common challenge I’ve encountered with many clients is low event match quality (often below 4 or 5) when sending Typeform submissions to Meta. This can significantly hinder campaign performance.
The root of this issue lies in effectively transmitting complete user information to ad platforms. While the Data Layer method, often implemented with Google Tag Manager, is a standard solution, many businesses lack the necessary technical resources to implement it effectively.
Follow the Below Steps to Complete the Integration:
Requirements :
- Typeform Admin Access
Typeform Integration :
Step 1: Sign In to Typeform;
Log In to Typeform make sure you have the admin access to publish the form
Edit the form which is live and needs to be tracked from the browser side.
Once you are logged in you will see the list of forms created inside the type form and Edit the form which is live and needs to be tracked from the browser side.
Step 2: Access the Logic Options on the Form Screen
On the form screen you will see the โLogicโ options click and enter to modify the form as shown below.
Step 3: Create a Hidden Field in the Form
To create a hidden field inside the form click on โPersonalize the Dataโ
Step 4: Add the Hidden Field to the Form
After the โpersonalize the dataโ option you will have another screen to create the hidden fields as shown below.
Click on the โHidden fieldsโ button a new popup will appear to add the fields in the form as shown below click on the โadd new fieldโ Icon and name it as โcluidโ
Step 5: Save the Hidden Field and Publish the Form
On my configuration I am naming the hidden field as โcluidโ you can name the field as per your preference
Step 6: Login to CustomerLabs and Access the Destination Tab
After making the necessary changes on the form log on to โCustomerLabsโ click on the โDestinationโ tab.
Inside the destination tab search for โCustom Integrationโ and click โview detailsโ
Step 7: Set Up the Custom Integration Script
Name the Integration and update the code script as given below.
(function() {
if ([“/path1/”, “/path2/”, “/path3/”].includes(window.location.pathname) && window.location.host == “[xyz.com]”) {
var _cltypeform = document.querySelector(“iframe#typeform-full”);
if (_cltypeform) {
var new_url = document.querySelector(“iframe#typeform-full”).src + “#cluid=” + CLabsgbVar.generalProps.uid;
_cltypeform.src = new_url
}
}
})()
Note:
Replace โ/path1/โ ,โ/path2โ/ with the pathname of your form for tracking purposes.
To find your formโs pathname, use the browser’s developer tools:
1. Right-click and choose the inspect element option from your browser
2. Go to the console.
3. Enter `window.location.pathname`.
Replace โxyz.comโ with the hostname of your form.
To find your formโs hostname, use the browser’s developer tools:
1. Right-click and choose the inspect element option from your browser
2. Go to the console.
3. Enter `window.location.hostname`.
Step 8: Test the Integration
After updating the script please fill out a test form to check the integration as shown below.
The โcluidโ captured and now you have to update the webhook for the same form to receive the data inside the customer labs through โwebhookโ
Step 9 :
Click the โConnectโ button on top of the same page this will take you to the โwebhookโ section.
Follow the below steps as per the screenshot.
Step 9: Navigate to Webhook Section
And, again go to Customer Labs click on the โSourceโ tab and choose โCustom Sourceโ
Step 10: Create a Custom Source in CustomerLabs
Name the source and a new webhook URL will be created based on name of the source, as shown below.
Step 11: Update the Webhook URL in Typeform
As per the screenshot above copy the โwebhookโ URL and update the URL in the Typeform then save the webhook as shown below,
Once the webhook is saved you need to switch on the webhook toggle to send the data to the desired end point attached screenshot for your reference.
Step 12: Verify Incoming Data in CustomerLabs
After the typeform configuration is completed check your incoming data in the customer labs source webhook to verify the cluid.
Now we got the cluid from the typeform now the data will be unified based on the cluid into the customer labs and the entire customer journey will be completed.
Followed by the data selection, complete the configuration as per the document.
How to set a custom source in customerLabs
What is a Source in CustomerLabs?
When a platform is connected as a Source, you will be able to bring all the event data from that particular platform through webhooks to CustomerLabs. This will enable you to enrich existing user profiles and create a unified view of the customer in one place.
Currently, CustomerLabs supports integrations with server-side and cloud app sources. View platforms that you can connect with CustomerLabs here.
Getting Started
Sources are currently accessible to all users of the platform. See how you can access Sources from your CustomerLabs home screen below,
The Sources dashboard gives a complete overview of the number of sources connected, their status, and the ability to access their setup.
To connect a new source, Click on Connect Source on the top right corner. This will open up the list of sources that CustomerLabs currently offers.
Step 13: Select your source
Once the platform integration is complete, you can now create workflows to bring specific customer data into CustomerLabs.
What is a Workflow?
A Workflow helps you to turn the raw data you receive from the source into specific event data based on the workflow configuration which includes filtering and modifying the parameters. You can create multiple workflows inside a Source. A workflow is a one-time setup that constantly receives customer data & updates user profiles in CustomerLabs in real-time.
Once a Source platform is authenticated, users can build workflows without writing a single line of code.
How to build a Workflow?
The four-step process to build a workflow is as follows,
Step 8: Setup the workflow
Name your workflow
This helps you quickly select relevant workflows โ just for internal purposes.
Example: If you want to receive the data of users whose stage is changed to โLeadโ in your CRM through this workflow, you can name this workflow โlead_updatedโ or โlead_createdโ.
Workflow Delay
Workflow delay is recommended when you have multiple workflows in a source.
The data coming into the source will be sent across the workflows at the same time if the workflow delay is not given. This may result in concurrency issues.
For example, Whenever a user enters from the source, CustomerLabs checks if the user is already available in the database or assigns a unique user id to the user. Say, you have 4 workflows for the source and when the data is sent across all the workflows at the same time, 4 new user ids will be created for the same user if the user is not there in the database. Hence, setting up the delay time will make sure the new user is assigned a single unique ID.
Step 14: Choose sample data
To receive event samples, trigger an event in that particular Source. For example, if youโre setting up a workflow to receive contact information as and when it gets updated in your CRM. Update a test contact in your CRM to receive event information in CustomerLabs.
You will be able to update up to 5 samples at once. Fetching sample data in a few source platforms might take time. In that case, please wait for some time before you try again.
You can view the incoming sample data and select the sample that suits your use case.
You can view the incoming sample data and select the sample that suits your use case.
Note: While selecting the sample, ensure the data contains no parameters with null values as given in the image and check if the cluid is passed in the source log
The Customer Labs will not process parameters with null values. This is because null values are not considered valid data by the destination. If the sample data consists of any field with a null value, it will not be pushed to the destination.
We suggest passing all the required parameters with a value or an empty string.
For example, if the parameter is โfirst_nameโ, you could pass the value โJohn Doeโ or the empty string
โ โ. Only if you pass all the required parameters with a value or an empty string, we can process the data and send them to the integrated destinations successfully.
Step 15: Event Configuration
Event configuration is the workflow setup’s final and most important step.
15.1. Event name
Assign the event name by selecting from the drop-down as shown below and choosing the custom event and name it cl_leads or cl_ registration
15.2 User Identity Mapping
As previously mentioned, we are capturing the “cluid” using a hidden field. This “cluid” serves as an identifier that helps in the unification of both browser and server-side events and mapping the โcluidโ as an identifier is an important step in integration
You can choose upto 3 different identifiers including external IDs to map user information. These external IDs will be stored by CustomerLabs to create an enriched user profile.
User traits: All user/contact/individual-related information can be added under user traits and a screenshot example is given below
To send the user traits to the destination, you must map the user details under this section. This mapping process will allow you to send this valuable user information to the intended destination.
For example, if youโve set up a workflow to receive all contact updates from your CRM to CustomerLabs. Information such as Contact first & last name, phone, email, address, company, lifecycle stage, job title etc. can be added under user traits. One such scenario would be when you want to run an email campaign with Klaviyo, you should add email ID as a user trait in this section to pass this information to Klaviyo or any such destinations in this case.
Source Logs
Source Logs show a list of events received by the source webhook before being sent to the workflows for event processing. There may be a delay in displaying the events items of up to 10 minutes, which is currently optimized.
You can see the logs by clicking on โLogsโ from a particular source as shown below.
Every single message received by CustomerLabs will have a unique message id and weโll be logging them so you can see how it is being processed in various workflows before appearing in the event manager.
Source โData inโ log
The below image shows the log data of the message received from that particular source and data variables in JSON format.
Source โData outโ log
The below image shows the log data of the message processed and sent to respective workflows along with a new message id.
Workflow Logs
Individual workflows will also have their own logs, and you can use them to see how the event is transformed including user traits, event attributes, group(account) traits, external ids, group(account) identities, and other attributes.
Few tips on workflow status messages in โData outโ
Youโll see the following messages in the workflows and the reasons are listed below.
a) Mapping not found โ When a workflow is in draft mode, the message as โMapping not foundโ is thrown.
b) Filter condition failed โ When a workflow filter condition is failed, this message is thrown.
c) User ID missing or Account ID is missing โ We assume every event should have User identity or account identity fields. When the data is missing weโll throw an error and the event wonโt be processed further.
d) Data not found โ This message means the data is still being processed, sometimes when there are lot of requests the systems will take up to 10 minutes to process the data.
Destination
Send incoming data to third-party apps to boost marketing effectiveness. Learn more about the destination tools we support.
You want to explore? Need a hand โ happy to help, always!
.
