Expand my Community achievements bar.

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.