Custom Code

Owned by Former user (Deleted)
Last updated: Apr 23, 2019 by Florian Wilhelm
2 min read

Advanced

Please note that this is an advanced feature and not enabled by default

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)}

Elements
var_statementThe variable statement declares a variable, optionally initializing it to a value.
conditional_statementThe conditional statement executes a statement if a specified condition is true
variable_keyThis represents the variable_key that needs to be specified by the implementation specialist using JavaScript.
attribute_keyThis represents the attribute_key that will be send to the DMP.
trueThis is the outcome of the conditional statement as part of the JavaScript that initiates the custom data pass.
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.


For the example the complete JavaScript code that captures the 'Lager' value from the breadcrumb look as follows:
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);
}