Expand my Community achievements bar.

Applications are now open to join the Adobe Experience Platform Champion Program. Apply by June 10!

Mark Solution

This conversation has been locked due to inactivity. Please create a new post.

SOLVED

Custom code Data Element returning empty value

Avatar

Level 1

Hi, I tried using the below custom code to capture dropdown selection values as data element. It works in console but when i input the code as a data element and check the _satellite.getVar() for this data element, it just returns an empty value "". 

My Javascript is basic and i am fairly new to Adobe Launch so step by step instructions with visuals would be great.

Thank you

 

var selectElm = document.querySelector("#order_retailer_name")
selectElm.addEventListener("click",function(){
var elm = this;
var selectedElm = elm.options[elm.selectedIndex].textContent;
return selectElm;
});

1 Accepted Solution

Avatar

Correct answer by
Level 10

That code will not work in Data Element custom code as it's asynchronous.

One of the options is as follows:

  1. create a rule with Click event mapped to the CSS selector #order_retailer_name
  2. define a custom variable inside Conditions via a custom code
    var elm = this;
    _satellite.setVar('name', elm.options[elm.selectedIndex].textContent)
  3. Reference the custom variable by name as a data element where necessary

View solution in original post

3 Replies

Avatar

Correct answer by
Level 10

That code will not work in Data Element custom code as it's asynchronous.

One of the options is as follows:

  1. create a rule with Click event mapped to the CSS selector #order_retailer_name
  2. define a custom variable inside Conditions via a custom code
    var elm = this;
    _satellite.setVar('name', elm.options[elm.selectedIndex].textContent)
  3. Reference the custom variable by name as a data element where necessary

Avatar

Level 1

Hi @Andrey_Osadchuk  thank you very much for your reply, much appreciated. I have a couple of further questions in regards to this which i hope you can help me with. I am trying to capture the successful submission of when user selects a retailer, inputs a voucher code and clicks Apply code. This then takes the user to a new page!

Visual below;

Kamil84_0-1593175492663.png

From your previous solution, i am thinking to create two rules for "Select retailer" and "voucher code" input following the method you proposed. Then i will create a third rule which will capture the Apply code click but with a condition of only firing the rule if the next page loads using page path. Under actions, i was thinking to use two eVars which will use the data elements that will be created in the first two rules and an event. See example below;

  1. Activation - Brand v80
  2. Activation - Voucher Code v81
  3. Activation - Successful Voucher Application e27

I tried using this approach and the rules fire but it says the conditions have not been met (this happens for all 3 rules).

Any guidance would be much appreciated.

Thanks,

Kamil

 

Avatar

Level 10

Kamil,

You should add "return true;" at the end of the custom code to meet the condition criteria.

For the use case you have described, I would consider creating a single rule that gets fired on the button click. At that moment it should be possible to pull the values from both inputs using a custom JS code. In other words, if you are confident in JS and do not need to capture the input fields values unless the visitor submits the form, consider a single rule.