Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Track Clicks Only Once on a Checkbox

LeoS_Taco
Level 4
Level 4

First, as usual, sorry if this answer exists but I searched and couldn't quite find the answer for which I am looking. I'm trying to track an action on an input checkbox only once, that is if I have a list of checkboxes I want to only track if user clicked on it once, so even if they deselect a chackbox they've checked only the first click is tracked. I know there's a way to check if a checkbox has been clicked in JS via "querySelector().input" type call, but I'm lost as to how to bring that full circle to only have tracking event fire only once regardless of how many times the user toggles it. Consider the following mark-up:

<li class="js-form-item form-item form-item__item form-item--checkbox__item">

    <span class="checkbox">

      <input view_id="explore" display_id="explore_main" data-drupal-selector="edit-category-title-app" type="checkbox" id="edit-category-title-app" name="category[title_app]" value="title_app" class="form-checkbox form-item__textfield">

        <label for="edit-category-title-app" class="checkbox__label">

          <span class="checkbox__faux"></span><span class="form-item__label">App</span>

        </label>

     </span>

</li>

Message was edited by: Leo Shvedsky

1 Accepted Solution
Muralidharan_Ve
Correct answer by
Level 2
Level 2

Hi Leo,

Check if the below snippet helps you.

$('input').one('change',function(){

s.linkTrackVars='';

s.linkTrackEvents='';

s.tl(this,'o','');

});

(or)

firstClick = false;

$('input').on('change',function(){

if(!firstClick){

firstClick = true;

s.linkTrackVars='';

s.linkTrackEvents='';

s.tl(this,'o','');

};

});

Regards,

Muralidharan

View solution in original post

2 Replies
Muralidharan_Ve
Correct answer by
Level 2
Level 2

Hi Leo,

Check if the below snippet helps you.

$('input').one('change',function(){

s.linkTrackVars='';

s.linkTrackEvents='';

s.tl(this,'o','');

});

(or)

firstClick = false;

$('input').on('change',function(){

if(!firstClick){

firstClick = true;

s.linkTrackVars='';

s.linkTrackEvents='';

s.tl(this,'o','');

};

});

Regards,

Muralidharan

View solution in original post

joshd7227840
Community Advisor
Community Advisor

I think Muralidharan has the right idea in principle (the example is javascript with pure aa code.. there is likely a better "DTM" way to do it, that makes better use of stuff available in DTM), though you may want to be more explicit and also check that its state is checked. Not sure how your site is structured / functioning but for example if you have some of them checked by default, unchecking them would also trigger this, and that may or may not be your intention to (also) track. Just something to consider.