This article describes an example where some advanced jQuery is needed to obtain the value of the selected radio button.

In this article:

Introduction

Form Tracking is quite popular within the Web Analytics industry and you have probably heard about it somewhere before or is currently actively doing it yourself already.

But sometimes appearance is deceiving and not always that easy to access the information that you are after, especially not if your developers are creative individuals and start playing around with alternative ways of displaying those elements.

A popular technique these days used by UI developers is to “mimic” standard HTML elements with a new and improved “look-and-feel” to it. On the front-end side of it, it might look like the standard elements, be it a checkbox or a radio group for example. However, on the Markup side of things, the reality is that placeholder containers are used instead with a look-and-feel of form elements using CSS.

This article provides an example of how this might be accomplished through a Tealium JavaScript Extension.  

The method described in this article utilizes screen-scraping. This is not best practice for the reason that changes to the site could break the logic used to read the value of the element being scraped. It is better for the client to trigger the utag.link call passing the value to Tealium. 

Setup the jQuery logic

In this article example, the primary objective was to find the below radio-groups’ “checked” state and obtain the visible value displayed in the UI. You have probably seen something along these lines before. The example will utilize an "add-product-to-wishlist" event. The goal is to include the name of the "wishlist" as it's customizable name might reveal some additional value and reasoning to why the customer added the product to a specific named list. 

Example Modal:

modal1.png

The “selected” or “checked” state is indicated by a red-ish dot inside a circle. The dot is styled using a CSS pseudo class. The Markup in the example form used above looks like this:

radiobuttoncodeexample1.png

To the trained eye, one will notice that the “behind-the-scenes” HTML input element has a different value, and certainly not the value that we are interested in. Therefore, we have to access the label element associated to the radio input element and access that text value instead.

Here is one way to do it utilizing jQuery:

  1. Find all the input elements of type radio.
  2. Find the one radio button that is currently in a “checked” state.
  3. Identify the enclosing div container with class “radio”.
  4. Get the text value of the label.

This results in the following jQuery statement:

Instant Smokey Shadow and Liner | Catrice 2019-07-04 11-56-31.png

Nice and clean. Now we just need to wrap it up to trigger the code when someone clicks on button Add.  The Markup looks like this:

ButtonMarkup1.png

Thus the selector for the Add button will be name="AddWishlistItem".

Results

Putting the above altogether, here is the finished JavaScript code for the mousedown handler which includes the call to utag.link to track the event. The data passed to Tealium in this instance is the tealium event, the SKU of the product and the value of the wishlist name the product is added. For the JavaScript extension you may want to apply conditions so the code only applies on the pages where the wishlist option is available to reduce overhead.

// product add to wishlist
(function () {

'use strict';
//debugger;

jQuery (document).on ('mousedown', '[name="AddWishlistItem"]', function (e) {
var tealium = window.TEALIUM,
$form = jQuery(e.target).closest ('form'),
id = b.product_sku,
data = {},
list = $form.find ('input[type="radio"]')
.filter (function () { return jQuery (this).prop ('checked') === true; })
.closest ('div.radio')
.find ('label')
.text ()
.trim ();
data.wishlist_name = list;
data.product_id = id;
data.tealium_event = 'add_to_wishlist';
utag.link (data);
});
} ());
Version history
Last update:
‎01-15-2021 02:10 PM
Updated by:
Public