Using Data Layer to track event based rule - adobe

Question

This is kind of confusing. suppose i have implemented a data layer with page details. The page has 2 articles, both gets redirected whenever clicked. Now suppose the tracking goes like this, Once the User clicks on the card, the name of card (h1) name will be reported in the tool. I have implemented this scenario without using data layer. (Looking for custom script in Adobe DTM data element?).
The code is mentioned below where i have defined the data layer. In DTM console I have created data elements, and mapped with the datalayer object. for Card name - DDO.pageData.cardname. Also created an event based rule and mapped with this data element. Problem here is, whenever i am clicking one article, it is taking h1 of both the article in a single evar. Ideally it should take the value of ONLY the article which is being clicked. Please suggest.
<article class="mu-item">
<a href="www.google.com" data-tags="test" target="_blank">
<div>
<h1>This is a test text for tracking</h1>
<p>This was the day when the South Stand at Old Trafford, the stadium where he played around half of his 758 matches for United, was officially renamed in his honour before his beloved Reds took on Everton in the Barclays Premier League.<br><br>
</p>
</div>
</a>
</article>
<article class="mu-item">
<a href="www.facebook.com" data-tags="{{displaytag_2}}" target="_blank">
<div>
<h1>This is new card</h1>
<p>This was the day when the South Stand at Old Trafford.<br><br>
</p>
</div>
</a>
</article>
<span>some text</span>
<script type="text/javascript">
DDO = {} // Data Layer Object Created
var pageObj = {};
var pageDOM = $('.mu-item');
pageObj.DestinationURL = $(pageDOM).find('a').attr('href');
pageObj.cardName = $(pageDOM).find('h1').text();
DDO.pageData = {
"pageName": document.title,
"DestinationURL":pageObj.DestinationURL,
"cardname":pageObj.cardName
}
</script>
<script type="text/javascript">_satellite.pageBottom();</script>

Answer 1

As others have mentioned, the only way to know which h1 value is relevant is to capture it during the click event.
As I mentioned in the comments of your other question
[..] DTM does not currently pass a reference to this to data elements created in the config area
There is no way around this. You must capture it during the click event as I showed you on your other question (custom script within a rule condition). As others have mentioned, making it pass through your data layer is technically an unnecessary step. There are pros and cons to actually doing it, but that's a different discussion.
Assuming you are determined to do it...
Go to Rules > Data Elements, and click Create New Data Element.
Name your data element according to whatever convention you use. For data layers, I personally like to name it the full data layer path, e.g. "DDO.pageData.cardName".
For Type, select "JS Object".
For Path, put the full path DDO.pageData.cardName
Click Save Data Element to save the data element.
Next, go to your Event Based Rule. It should still have your same Event Type (click), and Element Tag or Selector (article.mu-item).
In your Rule Conditions, select "Data > Custom" to add a custom js code box.
In here, you will still need to grab the information based on this. But instead of using _satellite.setVar() to create an on-the-fly data element, you will instead push the value to your data layer.
Example:
var articleTitle = $(this).find('h1').text()||'';
window.DDO
&&
window.DDO.pageData
&&
(window.DDO.pageData.cardName=articleTitle);
return true;
Note: I'm using jQuery syntax to get the h1 text. Based on your previous question you were having trouble with that at the time, so I showed you the vanilla js version. Not sure if you sorted that out or not, but you get the principle.
Now you can use your data layer referenced data element within the rest of your rule's fields %DDO.pageData.cardName%

Answer 2

Your problem is that you have multiple menu items and headlines. You would either have to create an array with all headlines (which would it make hard to get the correct entry for a click) or populate the datalayer only after a click on the element, so it always contains the data for the selected element.
However as I pointed out there is a good chance you do not need this. If you do an event based click rule with an css selector you have available a data element that DTM automatically creates - it's called %this% and contains the clicked DOM node. You should be able to get the text inside the headline with %this.textContent% (you have a nested paragraph in your headline, which I'm not sure is valid HTML, so you must allow event to bubble up in the event rule configuration).