Capture User Attributes

This entry provides detailed information on how to capture custom user attributes. 

Use Cases

Because every website has its own content and structure it is important to customize the DMP On-Site Pixel according to your client needs. The Custom Data feature enables you to capture relevant elements from a specific website/webpage that are available from the source code or even from user-generated content and send it to the DMP in real-time. This enables you to store highly relevant data attributes that can be used to create advanced Custom Audiences. This feature return the text (content) of an HTML element, the SCR attribute it it is an image, the value if it is an input and the content attribute in case it is a meta tag.

Elements

The showcase below contains some specific elements that can be captured from a website. Click on the image to show in full-screen modus.

Implementation

A step-by-step guide on how populate custom data via the user interface:

1. Go to the website where the On-Site Pixel is implemented and Identify the specific element that needs to be captured.

2. Use your browser developer console to inspect the element.

3. Click on the element you want to capture in the DMP.

4. Click on 'Copy selector' from the right mouse dropdown to copy the exact location of the highlighted element.
5. Login to the DMP, go to the Data Collection overview and click on 'Configure On-Site' for the relevant Pixel.
6. Create a Custom Event or Custom Success Event, define the conditions and click on 'Capture User Attributes' from the right menu.
7. Define an 'Identifier' (key) for the custom data attribute to store in the DMP.

8. Paste the selector from your clipboard in the 'CSS path' input field in the DMP user interface.

9. Click on 'Save'.
    

Example

Based on the guidance from the step-by-step guide, the below screenshots show the custom data configuration for the second element (breadcrumb) as mentioned in the example at the top of this wiki entry.

Common Questions

• How to test if the CSS path is right?
  You can verify if the specified CSS path will return the appropriate value by open your browser developer console and run the following JavaScript code: alert($('CSS_path').text());
  
  

• How will the custom data be reflected and stored in the DMP?
  The key for the custom data attribute as well as the value will automatically be translated into JSON format and stored in the external_data attribute as part of the DMP's log format. Hereafter, the custom data attributes can be parsed into seperate attributes and enabled for the various DMP features. This process is described further down this wiki entry. The example below shows a key:value pair as stored in the raw data.

  {
  	"top_level_cat": "Lager"
  }

Custom Code

It is also possible to write your own JavaScript code and apply it to a given DMP Pixel in order to collect custom data attributes. The script can then be added at the first step, without the <script> tags.

JavaScript Template

Below the template that can be used for defining and sending custom data attributes to the DMP.

var_statement ; conditional_statement {flx1.data('variable_key', attribute_key, true)}

Simple Example

A step-by-step guide on how populate custom data via the custom code. Note that step 3 from the below guideline is optional and not required.

1. Define a name for variable: var var_name
2. Include the css path to the new variable: $('var_location').text()
3. Add the trim method to remove whitespaces from both ends of the string: $('var_location').text().trim()
4. Write a conditional statement to only capture the variable if the condition is true: if (var_name.length > 0)

5. Define the custom data attribute according to its conditional statement: flx1.data('var_name', attribute_key, true)

6. Add the JavaScript code to the relevant On-Site Pixel in the Data Collection user interface.
   
   

var TopLevelCategoryBreadcrumb = $('body > div.wrapper.site-container.snap-content > nav > div > ol > li:nth-child(2) > a > span.breadcrumb-name').text().trim();
if (TopLevelCategoryBreadcrumb.length > 0) {
	flx1.data('top_level_cat', TopLevelCategoryBreadcrumb, true);
}

Advanced Example

Based on the guidance from the step-by-step guide, an even more advanced example will be given below. It shows the custom code configuration to capture the fifth element (URL) as mentioned in the example at the top of this wiki entry. The use case is to strip and capture the product ID from the following URL structure: https://drizly.com/corona-extra/p2822.

1. Define a name for variable: var urlParts
2. Define the path to the urlParts by a JavaScript expression: document.URL.split('/');
3. Define a new variable name to consolidate only the last part of the urlParts: var lastPart
4. Define the path to the lastPart variable by a JavaScript expression: urlParts[urlParts.length - 1];
5. Write a conditional statement to only capture the variable if the 'p' is the first character of the last URL part: if (lastPart.indexOf('p') === 0)
   
6. Define a new variable name to consolidate the ID and strip the 'p' part: var productId
7. Write function to remove the 'p' parameter since we only want the iD: lastPart.replace('p', '');

8. Define the custom data attribute according to its conditional statement: flx1.data('product_item_id', productId, true);

9. Add the JavaScript code to the relevant On-Site Pixel in the Data Collection user interface.

The complete JavaScript code that captures the '2822' value from the URL looks as follows:

var urlParts = document.URL.split('/');
var lastPart = urlParts[urlParts.length - 1];
if (lastPart.indexOf('p') === 0) {
 var productId = lastPart.replace('p', '');
 flx1.data('product_item_id', productId, true);
}

Enable Attributes

Once collected and stored in the DMP, the custom data attributes can be enabled for reporting and/or audience building purposes. The DMP has a feature that provides end-users the ability to manage the enablement of the relevant custom data attributes for the Custom Audience feature and Report Central feature from within the user interface. This feature is called the 'Custom Data' scanner and described below. In addition, an API service can be leveraged to programmatically take care of this.

Custom Data

The 'Custom Data' scanner provides an overview of all custom data attributes being collected for your DMP account in an interactive table. The end-user has the ability to apply settings on the custom data attributes on an individual level:

A step-by-step guide on how custom data attributes can be enabled for the various DMP features.

1. Login to the DMP, go to the Data Collection overview and click on 'Custom Data'
2. Click on ‘Scan Data’. The system will scan for data which is imported. This may take several minutes dependent on the number of custom data attributes.
3. Once the system completed the scan, the following settings needs to be applied in order to enable the custom data attribute in the user interface:
   
   1. Title: provide a descriptive name for the custom data attribute.
   2. Available in Custom Audience: tick the checkbox to make it available in the Custom Audience feature.
   3. Available in Report Central: tick the checkbox to make it available in the Report Central feature.
4. The settings will be automatically saved in-line so once finished you can go back to the Data Collection overview.

Common Questions

• Can you specify whether the custom data attribute should be a dimension or measure? In other words, is the data type configurable?
  No, at the moment all enabled custom data attributes will become available as dimensions, it's not possible to change them into measures yet.
   
• Under which category does the custom data attibute fall in the Custom Audience feature?
  All enabled custom data attributes will be part of the 'Custom' category in the Custom Audience feature. It's not possible yet to select or create another category.
   
• Does the overview of the Custom Data scanner only contains attributes that are manually be configured by the implementation specialist?
  No, it will also include custom data attributes originating from the various On-Site Pixel modules that are enabled for the DMP account. Read the Capture User Attributes wiki entry for more information.