I might tell it to listen to link\/anchor tags (“a” tags) that are within list items (“li” tags) that have a class of “menu-item”. \u00a0The CSS Selector for this would be “li.menu-item a”, so I might create this rule in DTM:<\/p>\n
This should work, BUT there are a few potential problems:<\/p>\n There is an alternative: instead of relying on classes, we could work with developers to add another attribute to the elements we want to listen to. This attribute would be completely arbitrary- I’m going to use “data-track” for this post. So I might ask developers to add “data-track=’nav click'” to that element:<\/p>\n Then in DTM, I could set up a rule that listens not to CSS, but for clicks on any item that has “data-track” on it: Or if I wanted, I could have this particular rule only fire on clicks where “data-track” started with “nav click”: “[data-track^=’nav click’]”.<\/p>\n This approach has some benefits:<\/p>\n As well as a few potential downsides:<\/p>\n Ultimately, for many clients, the benefits of having control and flexibility far outweigh the upfront work of adding those tags.<\/p>\n Hopefully this approach can provide a solution to some folks out there, or at least can serve as a starting point for discussing the different options for setting event-based rules. I’d love to hear about folks who have used this solution or other solutions to keep CSS selector dependency to a minimum!<\/p>\n","protected":false},"excerpt":{"rendered":" A lot of the magic that happens in DTM is based on CSS (cascading style sheets) and CSS Selectors (using the styles applied to HTML elements as a map to your site). Even if you have a data layer to avoid relying on CSS for your data elements, Event-based Rules still rely on CSS Selectors … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"_links":{"self":[{"href":"https:\/\/www.digitaldatatactics.com\/index.php\/wp-json\/wp\/v2\/posts\/143"}],"collection":[{"href":"https:\/\/www.digitaldatatactics.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.digitaldatatactics.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.digitaldatatactics.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digitaldatatactics.com\/index.php\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":5,"href":"https:\/\/www.digitaldatatactics.com\/index.php\/wp-json\/wp\/v2\/posts\/143\/revisions"}],"predecessor-version":[{"id":275,"href":"https:\/\/www.digitaldatatactics.com\/index.php\/wp-json\/wp\/v2\/posts\/143\/revisions\/275"}],"wp:attachment":[{"href":"https:\/\/www.digitaldatatactics.com\/index.php\/wp-json\/wp\/v2\/media?parent=143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitaldatatactics.com\/index.php\/wp-json\/wp\/v2\/categories?post=143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitaldatatactics.com\/index.php\/wp-json\/wp\/v2\/tags?post=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"ebrCSS\"](\"http:\/\/digitaldatatactics.com\/wp\/wp-content\/uploads\/2016\/05\/ebrCSS.jpg\")
<\/a><\/p>\n\n
<li id<\/span>=\"menu-item-82<\/span>\" class<\/span>=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-82<\/span>\" data-track=\"nav click:beacon parser\"<\/strong>>\r\n<\/span> <a href<\/span>=\"http:\/\/digitaldatatactics.com\/beaconParser\/\"><\/span>Beacon Parser Tool<\/a>\r\n<\/span><\/li><\/span><\/pre>\n
\n<\/a><\/p>\n\n
\n