Expand my Community achievements bar.

How to create Event based Data Element?

Avatar

Level 10

Generally ,we encounter a situation where we want to define a data element on the fly  and then use it in the interface for an event based rule  Hence to achieve this,  we can dynamically capture the value of the event, and can set it  when defining the criteria for an event based rule, within the custom code block using below code:  

Var str= $(this).attr("linkname"); // This line will fetch the name of the link clicked  when an event click rule is fired on clicking of a link on the page. _satellite.setVar('Link_Name',str); _satellite.getVar('Link_Name'); return true;

//  This data element will now be available like any other within the interface using %Link_Name%

Additional Points: 

  • setVar saves the data element on a page level scope – this is okay since you’ll typically only be manually setting these variables when you are referencing elements with $(this).
  • You can also use %% substitutions for these data elements within the UI. For the example above, we could have referenced the data element via %link ID%.
  • When you manually override a data element that exists and has a scope, it retains the scope of the element.

Please feel free to reach out to me  in case of any questions or queries.

Thanks & Regards

Parit Mittal

8 Replies

Avatar

Level 2

In my opinion :

First I would catch the attribute "linkname" using native javascript to not create a dependency with jQuery library.

Second, I would create a parametered data element. This ability is not well known but very useful to combine it with event based rule, and so centralize redundant code

The result would be :

My custom javascript data element named "Scraped Clicked linkname" scoped on pageview

return function(a) { return a.getAttribute(“linkname”); }


And I use my data element in the custom editor :

var linkname = _satellite.getVar(‘Scraped Clicked linkname’)(this);

 

Cheers!

Avatar

Level 3

I tried to use your example to pass data from an event based data element, but I didn't ave any luck. Please advise, I really need to make this work. 

 
  1. $("input[name='loanAmount']").mouseleave(function(){
  2. var Amount = $this.attr("input[name='loanAmount']").val();
  3. _satellite.setVar('loanAmount',Amount);
  4. _satellite.getVar('loanAmount');
  5. Return true;
 
  1. I also tried this.
  2.  
  3. var Amount = $this.attr("input[name='loanAmount']");
  4. _satellite.setVar('loanAmount',Amount);
  5. _satellite.getVar('loanAmount');
  6. Return true;

Avatar

Level 10

Hi Darius,

There is a problem with the following line of code : 

var Amount = $this.attr("input[name='loanAmount']");

 

You should only use the the attribute name "loanAmount"  i.e. $this.attr('loanAmount"); . $this.attr() basically fetches the value of specified attribute let say "name" depending on the event type and css selector of the event rule.

 

Ex- Let's suppose that we have an HTML code 

<a id="a1"  href="####" linkname="clickhere"> click here</a>

 

and we want to capture the link clicks on this particular link through an Event based rule Hence we would create an event based rule with event type as"Click" and css selector "a#a1" and under custom code in the rule condtions  we would use the code 

  1. Var str= $(this).attr("linkname"); // This line will fetch the name of the link clicked when an event click rule is fired on clicking of a link on the page.
  2. _satellite.setVar('Link_Name',str);
  3. _satellite.getVar('Link_Name');
  4. return true;

 NOTE-  $this here points to <a> tag with id="a1"

 

Thanks & Regards

Parit Mittal

Avatar

Level 3

Well I tried the following and still no luck..  

first I tried.

var Amount =($this).attr('loanAmount');
_satellite.setVar('loanAmount',Amount);
_satellite.getVar('loanAmount');
return true;

and then I tried

var Amount =($this).attr("loanAmount");
_satellite.setVar(this.name, $(this).val()  );
_satellite.getVar('.val()'); 
return true;

 

In both cases I got the following error ="referenceError - $this is not defined"

 

here is the HTML I am trying to capture the data from..

 

<input id="uid_loanAmount_4858780067284405" type="number" name="loanAmount" class="form-control 
input-large input-small no-arrows number" min="0" step="1" aria-describedby="uid_loanAmount_4858780067284405-error" 
aria-required="true" aria-invalid="false">

 

Please advise, I am really frustrated at this point.  

Avatar

Level 10

Hi Darius,

There is no attribute "loanAmount" in the HTML Code of Input tag from which you are trying to capture data. Also, I suspect there is some problem in the way your Event based rule is configured such that $this is undefined. Can you please share your DTM Account login details in aprivate message so that we can debug the issue at our end.

<input id="uid_loanAmount_4858780067284405" type="number" name="loanAmount" class="form-control 
input-large input-small no-arrows number" min="0" step="1" aria-describedby="uid_loanAmount_4858780067284405-error" 
aria-required="true" aria-invalid="false">

Thanks & Regards

Parit Mittal

Avatar

Level 1

Hi, can you quickly check using $(this) and not ($this)

Regards

Pankaj

Avatar

Level 1

also If I look at your HTML I dont see data attribute which is named as ''loanAmount" so you would get undefined  but you use .attr('name') you should get back "loanAmount". Can you mention which value from HTL you are trying to capture?

Avatar

Level 3

Ok I will try your suggestion first. If I still have problems I will send you the DTM login info.