Custom Script in 'Conditions' section of Event Based Rule in DTM

Question

I am trying to use custom script in the Event Based Rule to fire tag in Dynamic Tag Management.
Please note that my objective is just to fire tag on the page as of now, so that I can leverage this script for my further use in DTM.

Please have a look at my problem statement: In the 'Conditions' section of 'Event Based Rules', I have selected 'Event Type' as 'Click'. Set the 'Element Tag or Selector' as 'div'. Now, I can use 'Manually assign properties & attributes' option here, for eg: setting 'property' as 'id' and 'Value' as '12345' (which is id's value on the page, suppose). So, whenever user clicks on any link with HTML element tag as 'div' having property 'id' and value being '12345', a Omniture tag will fire on the click functionality of this.

What I want now is, instead of using 'Manually assign properties & attributes' option, the similar thing I want to do by writing a script (In Rule Conditions -> Data -> Customs). I am writing this code in the script (after un-checking the 'Manually assign properties & attributes' option ):

$('#12345').click(function() { return true ; });

But this is not working.

Can someone please help me out with this. I am badly stuck in this.

Thanks, Adi

Answer 1

If you just want the rule to trigger onclick of div with id 12345 then just put div#12345 as the element tag/selector field (it accepts a css path, which is evaluated with querySelectorAll).

If you are looking to alternatively do it a more "manual" way, i.e. you just want the click event to be generic and do a 100% custom condition w/ your own logic, you MUST enter a value in the element tag/selector field, because DTM needs to know what to attach the event to. So at a minimum you need to do something very top level, e.g. body. IOW you need to do it same principle as event delegation.

Then in...

Rule Conditions -> Data -> Customs

..you can do pretty much anything you want, but it MUST return true or false.

So for example, you had the following:

$('#12345').click(function() { return true ; });

This isn't going to work as expected, because you are just attaching an event handler. An event based rule already handles the event, which is why you have to specify the event, i.e. "click". So that code is basically going to end up returning a falsey value since you aren't actually returning anything.

So instead, you'd do something like this:

Set the element tag/selector to div or something top level like body, then in the custom section, do something like this:

if ( $(this).attr('id') == '12345' )
  return true;
else
  return false;

Note that I use jQuery syntax because you used it in your post; DTM doesn't output jQuery or have it built-in, so you need to ensure jQuery is loaded for that to work. But it's easy enough to do the "vanilla js" version of getting the id attribute of this

If you want to be able to specify your own event handler, like what you had:

$('#12345').click(function() { return true ; });

Then the best thing you can do is instead output this in a page load rule in the javascript / 3rd party script section. From there you'd make the closure call a direct call rule instead of returning true, for example:

$('#12345').click(function() { _satellite.track('doSomething'); });

Then you make a direct call rule instead of event based rule, and for the string condition, you'd put "doSomething" and then pop whatever you want from within there.