Search code examples
javascriptadobe-analytics

Adobe DTM Capturing Change of Select


I thought this would be straightforward but I don't see how to use DTM to detect the onChange of a select? If I choose "change" in the event type, I get a dropdown to select a data element which is not what I want. So how do I detect the changing of a select on a page? I don't care about the value it changes to, only the fact that it changed?

<select id="mainForm:cont_appRequest_customers__0_identityDocuments__0_identityDocumentType:decoin:appRequest_customers__0_identityDocuments__0_identityDocumentType" name="mainForm:cont_appRequest_customers__0_identityDocuments__0_identityDocumentType:decoin:appRequest_customers__0_identityDocuments__0_identityDocumentType" size="1"> <option value="org.jboss.seam.ui.NoSelectionConverter.noSelectionValue" selected="selected">-- Choose one --</option>
<option value="DRIVERS_LICENSE">Driver's License</option>
<option value="STATE_ID">State issued ID Card</option>


Solution

  • Within your Event Based Rule > Conditions > Event Type

    Select Forms > change

    Leave to value and the text field for it unchecked and blank.

    A "Select Data Element" dropdown will appear - Ignore it (leave it as the default "Select One" value).

    Target the <select> element using Element Tag or Selector field as normal.

    Side Note: (this is what you mentioned in your question as the problem). I think the "Select Data Element" dropdown is supposed to be for if you want to bind the change to a Data Element - in your case, the <select> element to a (css) data element - but I don't think this is working as Adobe intended.

    I think the intention was for it to effectively be the same as the dataelementchanged Event Type, but the Rule still expects you to fill out an Element Tag or Selector anyways, even if you select a Data Element. IOW you have to fill out the rest of the Rule fields anyway, so I don't really see a benefit of setting up a Data Element, too. On that note..

    Alternative

    An alternative way of doing this is to create a Data Element of Type CSS Selector. In the CSS Selector Chain, point to your <select> element, and for get the value of, select "value".

    Next, in the Event Based Rule, choose Event Type of dataelementchanged, and then select your Data Element in the dropdown.

    Note: I only mention this alternative for the sake of pointing out what I think the intended purpose of that "Select Data Element" dropdown is for, for the Forms > change method. But as mentioned, the Rule makes you fill out the rest of the fields anyway, so I don't really see the point in doing it for that first method. But this is how you'd do it as its own separate method. In practice, I don't recommend this method, because it has a higher performance cost than the first method (dataelementchanged type works by polling the data element every 100ms)