How to set and use data collectors
Download any piece of data right from the user's screen and send it as an event or use to update an attribute
How does it work?
A data collector is a powerful module that enables you to download dynamic data, such as the content of the forms or text variables from the user's screen. You can then store the information as an attribute or as an event.
How to prepare the module?
First, go to the page from which you would like to gather data.
Next, specify the exact information that you would like to gather.
For example, https://www.wikipedia.org/: bear in mind that the User.com widget is not installed on that page so it won't be a real-life example.
Goal: Collect content of the search field when a user clicks the search button
Create a new Data Collector in the application
- Go to "Tools" -> "Data Collectors" and click "Create new".
- Enter the Name of your data collector and move to the section Trigger. From the drop-down menu select click as the triggering action.
- Now, in the input field, we need to paste the CSS selector which will act as an identifier. Here is how you can get it from your website:
- With the right mouse button, click on the trigger element (in this case, the search button) and, from the drop-down menu select Inspect.
- The console will appear on the screen. It will show you a highlighted line of code. This line of code corresponds to the button that we inspected.
- Right-click on this highlighted piece of code and, from the drop-down menu, select Copy -> Copy Selector.
- Now go, back to your data collector settings and paste the selector in the input field.
- The next bit of data we need to provide is how we want to store the information extracted from the page. We can select an event, a user attribute, or both. In this example, we will choose both.
- Check both check boxes: Create event named and Update user attributes.
- Set the event.
- Name your event, e.g. "Wiki_search".
- If you want to store the content of the search input as an event's attribute, you have to click "Add event attribute". Fill in the new fields:
- Name your attribute, e.g. "Search_content".
- Go to your website and copy the CSS selector of the search input field. (The process looks exactly like before.)
- Paste the selector in the second field.
- Set the attribute.
- From the drop-down menu, select the attribute you want to store the search content in.
- Paste the CSS selector of the search input in the proper field. Remember that this value will be updated every time the module, "Data collector" is fired.
You can add more attributes and events if you want to collect data from other fields.
Click Save.
Your collector is ready!
Creating an Automation
The next thing you need to do is create an automation that will activate Data collector. Head over to the section, "Automation", and create a new Automation.
- Your trigger will be Page Visit (set for your website).
- Now, add the module "Data collector" and specify that you want to use your newly created one.
Remember that you don't have to set the trigger in action to the same trigger as Data collector. Here is how it works: Once the module, Data collector, becomes active, it will wait for its internal trigger to start data extraction.
- Now, you can save and activate the automation.
That's all! Your Data collector is active.
Automation summary
Let's walk through what happens when the user goes to that website, fills out the form and clicks "Search".
- Once the user gets to the website, the module, Data Collector, is triggered.
- Now, the system waits for the user to click the search button.
- The user fills out the form.
- The user clicks the search button, and bang! Without even knowing, they spark the system to collect the content of the search field.
- Data which has just been collected goes straight to the "last name" attribute and is also saved as an event called "Wiki Search" with one attribute called "last name".
Use cases
This module enables extracting data not only from form fields but from any website content. It lets you:
- Send events like "Product X added to the basket". Just use the "add to basket" button as the trigger of the automation and the piece of text including the name, price, or any other product information as attributes.
- Check if the user is logged in by downloading.
Troubleshooting
Problem: My data appears in the user profile, but is not visible in the section "People"
- Response: We use a special architecture that lets you browse through the section, "People", faster. The downside is that sometimes it takes a while to upload the data to this specific database. Depending on traffic, it could take up to 10 minutes.
Problem: All the users flow through the Data collector module, but data does not get extracted.
- Response: There might be several reasons for that:
- You have not provided a correct trigger selector. (Some pages are based on a dynamic selector format, meaning that the selector changes with every page view, therefore, it can't be used to identify the trigger element.)
- You have not provided a correct data source selector (perhaps caused by the dynamic structure as above).
- You have mistakenly extracted the selector of the wrong element. When copying the selector, always make sure to look for which element is highlighted. It may be that only a part of the button is addressed, so the automation will work only for people who click in that specific area of the text.
- Data from your source does not match the type of the attribute you chose; for example, you are trying to send "John" as the value of "last seen" attribute.
- You use the same trigger for the action as a whole and "Data collector". As explained above, you first need to trigger the action then trigger data extraction separately. For example, a correct way to do this is to set an automation trigger as "Page visit" and set the trigger for "Data collector" as "submit form button". The wrong way would be to set the "submit form button" for both.
Note, there can be a problem with sending data from the form on Safari. Form submit on this type of browser triggers the page reload that automatically breaks the data sending process.