This article will focus on how to create Data Element modules. It is an important component of the Adobe Launch solution and it can help your end user a lot if they require very specific type of data.
Data Elements in Launch
Data Elements in Launch are a “kind of” data layer for your Launch implementation. They are representing a layer of information that is (normally) not present on your website.
Normally, you should already have a data layer available on your website, that would help you define precise information for your analytics tool or your pixel tracking (Google Display Network, Facebook, etc…).
Sometimes the information you want to transmit to your partner or to your solution is not available from the data layer directly. It means that you need to use custom code for retrieving the information.
You can do the custom code directly in the action of your rule, by coding the script there. However, if you are going to re-use this piece of information, if it is a relevant information for other partners / solutions. You may want to capture it in a Data Element in order to easily re-use them later on.
Creating Data Elements
Creating a Data Element is quite easy in Launch and the tool provides a lot of predefined possibility for your Data Elements.
I will list the more common ones but a lot are already provided.
- Cookie Value
- DOM Attribute
- JavaScript variable
- Local Storage
- Session Storage
- Query String parameter
- Page Info : URL / Hostname / Pathname / Referrer / Title…
As you can see, there are already a lot of possible way to retrieve information from the website that are easily available from the UI. However it may come that you would need to use the custom code to retrieve a more precise information, or transform a cookie value into a more clean value.
In our case we will create 2 Data Elements, just to prove that we are not bind to create one element by Extension and how that impact the different elements.
I won’t be very creative here as we are going to create way to retrieve local or session storage and retrieving hash (#) parameters. The storage options already exist in the UI interface, I just chose them for the sake on showing how it would look like.
Data Element HTML
I will post only the HTML and JavaScript for the sessionStorage Data Element. The files are going to be mostly similar for the localStorage version.
The HTML is normally located in src>View>my_session_storage.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Data Element</title>
</head>
<body>
<h1> Data Element Template</h1>
<p>This configuration panel is for the sessionStorage Data Element. You will choose a sessionStorage name and we will retrieve the value inside.</p>
<p>The sessionStorage to retrieve :</p><input id='sessionStorage'></input>
<script src="https://assets.adobedtm.com/activation/reactor/extensionbridge/extensionbridge.min.js"></script>
<script>
window.extensionBridge.register({
init: function(info) {
if (info.settings) {/*if there is a persisting value */
el = document.querySelector('#sessionStorage');
el.value = info.settings.data;
}
},
getSettings: function() {
myObj = {}/*create the object that needs to be returned*/
value = document.querySelector('#sessionStorage').value || "";/*if there is a value to retrieve */
myObj['data'] = value;
return myObj;
},
validate: function() {
el = document.querySelector('#sessionStorage');
if(el.value == ""){return false}/*if the value that is retrieved is empty, it is not accepting it.*/
return true
}
});
</script>
</body>
</html>Data Element JavaScript
Below you can find the script to retrieve a localStorage value :
'use strict';
module.exports = function (settings) {
var localKey, value;/* Declare the variables because of 'strict' mode */
localKey = settings.localStorage || "";/*retrieve the key to look for*/
value = window.localStorage.getItem(localKey);
value == null ? value = '' : value = value;/* make sure that we return a string*/
return value;
};
On top of that, I develop a script to retrieve parameter coming after any type of parameter (?, #), depending your setting on the global extension :
'use strict';
module.exports = function (settings) {
var globalParam, settingKey, url, split_url, array_url, value;/* Declare the variables because of 'strict' mode */
globalParam = turbine.getExtensionSettings().dataElements
settingKey = settings.hashParam;
url = window.location.href;
value = '';
if (url.indexOf(globalParam) > -1) {/* if the parameter exists in the url */
split_url = url.split(globalParam)[1]
if (globalParam != '&' && split_url.indexOf('&') != -1) {/*if the parameter is not the amper and the amper is in the url*/
array_url = split_url.split('&')[1]/* create an array of different key value pairs*/
array_url.forEach(element => {
if (element.indexOf(settingKey) > -1) {/* if the key is in the url * /
value = element.split('=')[1]/* take the 2nd part of the key value pair*/
}
});
} else {/* if the param is the only parameter*/
if (split_url.indexOf(settingKey) > -1) {/* if the key is in the url*/
value = split_url.split('=')[1]/* take the 2nd part of the key value pair*/
}
}
}
return value;
};I think that the Data Element module is the easiest module to understand. I hope I didn’t confuse you on it and you’ll get a sense of what is possible from this module.
On this series, you may want to look at those articles :
| Article | Content |
| Introdcution to Adobe Launch & Extension Creation | This posts covers the basic of what you need to know in order to start with this series of articles. |
| Architecture and dependencies within modules | This posts covers the architectures and how the different modules are linked between each others |
| Global Extension Configuration | This article explains how to set up your configuration HTML file. It is the core configuration module of your extension. |
| Event type module | This article will show you how to build an event module. Every module will have a configuration part (HTML) and wrapper(JS). |
| Condition module | This article will show you how to build a condition module. |
| Action module | This post will be related to the action module and how to build it. We will also see how you can actually import some cool feature of the launch library. |
| Data Element module | This article will be developing the possibilities of the Data Element module |
| Shared module | This article will focus on the shared functionality that you can write and share with other extension developpers to used. We will also used a feature shared from Adobe Analytics to show you how to use it. |
| Other features | The other features that are related to Launch Extension. I will cover additional (and important) information there. |
| Testing your extension | How do I debug my Extension ? |
| Releasing and updating your Extension | How do I publish my Extension into Launch ? And after, how do you update it ? |