I am looking for a solution to track if a check box was selected when a form is submited

[defelicemattia]

Hi Community,

I am interested in tracking if a check box on a form was selected on the time a user generate the lead. I am interested in tracking both if selected will have value 1 if not value 0. 

I have seen this post https://community.tealiumiq.com/t5/Tealium-iQ/Dynamic-Google-Analytics-Event-Label-Input-ID-Values/m...

but I am not sure this can be the solution I am after. 

Thank you very much for your help.

[david_bird]

Hi @defelicemattia,

That article is a good reference. 

When trying out jQuery, Chrome development tools are useful. Here is an example of a checkbox with similar code applied:

I've added some feedback to the console to verify what is happening within the script. As well, I used an ID to the checkbox which can be useful if you are looking for specific elements. In this example, the checkbox was clicked three times to demonstrate the results in the Console. 

Give it a try first in dev tools! 

[defelicemattia]

Hi @david_bird 

Thank you very much for your answer. 

How do I use this to track users that submit a form with the check box selected or not?

In other words I need to track subscribers and not subscribers to a newsletter. Is this possible? 

The check box is set by default as checked and when I uncheck it the value doesn't change.

[david_bird]

Hello @defelicemattia,

To test the value of the checkbox, you could look at it's property. So, for the previous example, using the checkbox with id=cbemail

  $("#cbemail").prop('checked')

would return 'true' when the checkbox is checked and 'false' when it is not checked.

[defelicemattia]

Hi @david_bird 

Could you explain more in details please? Should I create a custom extension JQuery onHandler in order to capture forms sent with the checkbox checked or unchecked?

Thank you very much for your patience :)

[david_bird]

Hi @defelicemattia,

Yes, you can use the 'custom' Tracking Event option in the jQuery onHandler extension. Then supply the code within the JavaScript field to gather the information needed for the utag.link/utag.view call, including the status of your checkbox.

I think we are going to need some more context in order to supply any details. Feel free to reach out to your Account Manager if you want to talk to an engineer over the phone about the specifics.

Thanks, David

[defelicemattia]

Hi @david_bird,

thanks again for your advices, I see now the value of the check box into the console log as for your screenshot through a custom jQuery handler extension. 

Now I only need to map this value to a custom dimension through either a cookie or an UDO.

could you help?

Thanks again :)

[defelicemattia · Accepted solution]

Hi @david_bird

I know sometimes it is very difficult to place into context all the requirements users post on the community especially because not all the users are developer and often not familiar with custom tricks. You have anyway managed to drive me to the right direction and I have solved this and thought to share it with the community.

1-Using a jQuery handler extension in order to set the value of a variable registering interactions with the check box (thank David for the code which I just needed to modify) below the code I have used:

jQuery(document.body).ready(function () {
jQuery("#copy and paste here the checkbox id from your html code").change(function(){
if (jQuery(this).is(':checked')){ utag.link({ "UDO variable name as set into data layers tab":"checked" });
jQuery(this).attr('id');
} else utag.link({ "UDO variable name as set into data layers tab":"unchecked" });
});
});

2-Set persist value to place your UDO variable name as set into data layers tab into a cookie

3-duplicate the persist value extension and set to text as checked in order to set default value of the cookie adding the condition yourcookie is not defined

Hope this can help other users.

However, my last question is are you aware of any way to select multiple elements (check boxes) through jQuery selector as the ids all begin with the same string edit-submitted-subscribe-to-promotions

Thanks again for the support.

[david_bird]

Hi @defelicemattia,

Try using jQuery wildcards for your selector. Since edit-submitted-subscribe-to-promotions is the beginning of the ID, use

  jQuery('[id^=edit-submitted-subscribe-to-promotions]').change ...

If you encounter or set up a different pattern, try this reference for other wildcards:

http://www.w3schools.com/jquery/jquery_ref_selectors.asp

Hope this helps. 

~ David

[kathleen_jo]

Thank you @defelicemattia for sharing with us!