Search code examples
javascriptadobeadobe-analytics

Looking for example logic to pull a DOM value into a Custom Script Adobe DTM data element

Actual Question:

Does anyone have any basic example logic of how to pull the value of a DOM element in to a custom script data element?

Background:

I'm trying to build some custom data elements in Adobe Dynamic Tag Management (DTM). I want to capture specific sections of my breadcrumb in to elements - e.g. Given breadcrumb trail Home >> Category 1 >> Category 4 >> Page 1, I would want X = Category 1, Y = Category 4, Z = Page 1

Unfortunately, the anchors in the breadcrumbs do not use consistent identifiers, so I need conditional logic in order to select them. Example: When I'm on the Category 1 landing page, the category's element has ID "Current" but otherwise it has the id "L1Link" - therefore I would want the following logic:

if(#L1Link exists)
   X = #L1Link
else
   X = #Current

Unfortunately, I'm not sure how to select a DOM element in my Custom Function. I don't think _satellite.$data is what I want (I don't want data, I just want the text of the hyperlink). I tried using cssQuery, but I don't really have a callback to pass anything back to (and contrary to the documentation, it seems to get very upset if I don't have a callback).

Solution

  • Go to Rules > Data Elements and create a Data Element with the following:

    Name: category_1

    Type: Custom Script

    Then click on "Open Editor" and add the following:

    var x = document.getElementById('L1Link')||document.getElementById('Current');
if (x) return x.innerText||x.textContent;
else return '';

    This will first look for #L1Link and failing that, will look for #Current. If it is found, it will return the link's text.

    Based on your post, set Remember this value for as "Pageview"

    Save Changes

    Next, navigate to

    Rules > Page Load Rules

    If you don't already have a general page load rule setup that is set to pop on every page load, create one and name it something like "every page".

    In the Conditions > Criteria choose Data:Custom from the dropdown and then click Add Criteria

    Then add the following in the Custom textarea:

    return _satellite.getVar('category_1')||true;

    This condition will explicitly invoke the data element to ensure that it gets invoked, because DTM is moody and sometimes may not evaluate data elements. It falls back to true to ensure the condition always returns true, so that the condition will not cause the rule to fail to execute.

    Then in the Adobe Analytics section of the rule, choose whatever eVar and/or prop you want to set (e.g. prop1) and set as %category_1%

    Save Rule

    You will want to repeat this process for each item you are looking to make a data element to pop an Adobe Analytics variable for, though you only need one rule, and one condition for all of them. The condition code would be:

    _satellite.getVar('category_1');
_satellite.getVar('category_2');
//etc..
return true;

    NOTE: DTM has some caveats of order of execution vs. load/timing of things. This is in part due to the nature of async loading but there is also a mislabeling of order of execution in the documention (see my Issue #2) that Adobe has acknowledged. Basically, you may need to play with the Trigger rule at setting in the page load rule vs. what you set the "Load Adobe Analytics page code at" dropdown to in the Adobe Analytics Tool General config section and hope for the best. I setup a test page to verify all this in my post and pretty much anything I chose in either one worked, but then my test page had virtually nothing on it except the DTM page code and a link.