Need assistance passing an ID (or other attribute) into a Data Element

[#1]

Hi!

I could use some assistance with passing an ID (or other attribute) value into a Data Element.  Specifically, we’ve set up Recommendations using Target, and I’m trying to capture the BrandSKU for the recommendations that are engaging customers on click of the item (or rather the div that contains the item).  I’m having some difficulty with setting up the data element capture.

The div that contains the item is coded as follows:

<div name="recommendedSku" data-usn="270661" data-brandskunumber="GPT999916" class="pure-u-1 margin_20px_top bottom-border-light-gray padding_20px_bottom" id="Rec-GPT999916" style="display: inline-block;">

      <p class="text-center">

        <img src="/Images/ProductImage/Thumbnail/6/270661_usn.jpg" class="at-thumbnail"></p>

<p class="product_short_description bold"><a class="line-with-hover" id="search-sku-title" href="https://forums.adobe.com/Sku/GPT999916">SPECTRUM® COPY PAPER, RECYCLED, WHITE, 10 REAMS PER CASE, 5000 SHEETS</a></p>

        <br><p>Item #: <a href="https://forums.adobe.com/Sku/GPT999916">GPT999916</a></p>

<p name="priceAndUom" style="display: none;">Price: $<span name="price"></span> / <span name="uom"></span></p>

<p class="text-center margin_10px_top">

<a class="pure-button orange-button-secondary" href="https://forums.adobe.com/Sku/GPT999916">View Details</a>

</p>

    </div>

I'd like to set an event-based rule that fires on click of any of the links within the div and then capture the value of the SKU for the item contained in that div.

An example of the product recommendations on which I'm trying to capture clicks can be found on the right hand "Customers Also Viewed" section at the link below (note, the production code differs slightly from the code above):

    supplyworks.com/Sku/GPT999917

Any assistance would be greatly appreciated!!

Thanks!

Randy

[#2 · Accepted solution]

Hi Randy , 

Thanks for reaching out to Adobe DTM community. As per our understanding , we will need to create 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  code. 

Step 1: Create an Event based rule with conditions as  below snapshot :

Step 2: After setting up the the condition please choose "custom" in rule conditions and then add the below code to that :

var sku_id = $(this).parentNode.attr("id"); // This line will fetch the sku id of the link clicked  when an event click rule is fired on clicking of a link on the page. _satellite.setVar('Recommendation_SKU',sku_id); _satellite.getVar('Recommendation_SKU'); return true;

Additional Points: 

1. We are using jquery to fetch the sku id from DOM. If  jquery library is not present on the page then please add the library in a script tag in the head of the page.
2. 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

3. When you manually override a data element that exists and has a scope, it retains the scope of the element.

Please let us know in case of any questions or queries.

Thanks & Regards

Parit Mittal

Data Element Capture.png ‏77 KB