I am currently trying to track all answers to a drop-down question in a form.
My first thought was to do it through form.submit method, but this form won't trigger as one. The form submission only triggers as a link click.
Below is the part of the form I want to track. When you click it the first time to open the drop-down menu, google tag fires a click trigger. But when you click your option, a click trigger isn't fired.
Drop-down question I would like to track,
Here is the Drop-down HTML below
HTML of Drop-down in form,
<select name="problemId" id="problemId" class="form-control required defaultInvalid" data-gtm-vis-recent-on-screen-12805168_325="17797" data-gtm-vis-first-on-screen-12805168_325="17797" data-gtm-vis-total-visible-time-12805168_325="100" data-gtm-vis-has-fired-12805168_325="1">
<option value="" selected="" disabled="" hidden="">
Choose a Problem Category
</option>
<option class="option" value="0b12ec02-3ef0-414e-9e4a-684c90305f1a">Battery/charging issue</option><option class="option" value="1c5a60d7-4479-435a-86c7-b6f29154e13b">Does not turn on</option><option class="option" value="328a9e1f-43de-43aa-bcda-b96ab3938b4f">Intermittent Bluetooth connection</option><option class="option" value="420a1994-d332-4fc5-b039-0de06b66df05">No Bluetooth connection</option><option class="option" value="603b2142-0082-483a-846b-5538537d6451">Broken plastic case</option><option class="option" value="621681a9-dbc3-40dd-a94b-c9060be22551">No scanning beam</option><option class="option" value="dc13ab67-8518-42b8-ac9c-6c81618dc527">Loose parts inside</option></select>Here is the form submit HTML below,
I was thinking the best solution would be to turn this into a form via dataLayer? But I am no developer and would not be sure what/where to add code.
Thank you in advance! :)
<a class="btn btn-primary btn-send" data-url="/services-and-support/replacement-scanner/request-confirmation/" data-standard-service-url="/services-and-support/replacement-scanner/request-confirmation-standard-service/" data-standard-service-order-url="/services-and-support/replacement-scanner/request-confirmation-standard-service-order/" data-advanced-service-url="/services-and-support/replacement-scanner/request-confirmation-advanced-service/">Confirm</a>Thank you in advance :)
Here is also a copy of the page source if that helps at all
<!DOCTYPE html> <html lang="en"> <head> <title>
Replacement Scanner
</title> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="apple-mobile-web-app-title" content="Socket Mobile website" /> <!-- https://realfavicongenerator.net --> <meta http-equiv="content-language" content="en" /> <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" /> <link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
crossorigin="anonymous" /> <!-- CSS --> <link href="/ResourcePackages/RMA/assets/dist/css/bootstrap.css?package=RMA" rel="stylesheet" type="text/css" /><link href="/ResourcePackages/RMA/assets/dist/css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript">var sf_appPath='/';</script><meta property="og:title" content="Replacement Scanner" /><meta property="og:url" content="https://rma.socketmobile.com/services-and-support/replacement-scanner" /><meta property="og:type" content="website" /><meta property="og:site_name" content="RMA" /><meta name="Generator" content="Sitefinity 12.2.7230.0 PE" /><link rel="canonical" href="https://rma.socketmobile.com/services-and-support/replacement-scanner" /><link rel="alternate" href="https://rma.socketmobile.com/services-and-support/replacement-scanner" hreflang="x-default" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script type="text/javascript">
(function() {var _rdDeviceWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;var _rdDeviceHeight = (window.innerHeight > 0) ? window.innerHeight : screen.height;var _rdOrientation = (window.width > window.height) ? 'landscape' : 'portrait';})();
</script></head> <body> <script src="https://code.jquery.com/jquery-1.12.1.min.js" type="text/javascript"></script><script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js" type="text/javascript"></script><script src="https://ajax.microsoft.com/ajax/jQuery.Validate/1.8.1/jQuery.Validate.min.js" type="text/javascript"></script><script src="//js.stripe.com/v3/" type="text/javascript"></script> <!-- Latest compiled and minified JavaScript --> <script src="//stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js?package=RMA" type="text/javascript"></script> <nav class="navbar navbar-default navbar-fixed-top">
<div >
<div class="sfContentBlock sf-Long-text" ><div class="container-fluid"><div class="pull-left"><a class="navbar-toggle force-visible" id="toggle-sidebar"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
</div><div class="navbar-header"><p><a class="navbar-brand" href="#"><img alt="logo_nav" data-displaymode="Original" src="https://socketimagescdn.azureedge.net/cdn/images/librariesprovider2/default-album/logo_nav.png?sfvrsn=66b67e4f_2" title="logo_nav"></a></p></div></div></div>
</div>
</nav> <div class="sidebar-container">
<div >
<div class="sfContentBlock sf-Long-text" ><ul class="sidebar-navigation"><li><a href="/"><em class="far fa-life-ring"></em>Services and Support
</a>
<ul class="nav-list"><li><a href="/services-and-support/replacement-scanner">Replacement Scanner</a>
</li><li><a href="/services-and-support/contact-support">Contact Support</a>
</li></ul></li></ul></div>
</div> </div> <div class="section-info container section-index"> <div class="img-wrapper col-md-5">
<img src="https://socketimagescdn.azureedge.net/cdn/images/librariesprovider2/default-album/all-socket-mobile-products-1270551040.jpg?sfvrsn=2077ba20_0" title="devices" alt="devices"
/>
<div >
<div class="sfContentBlock sf-Long-text" ><p> </p><p> </p><div align="center"><img data-sf-ec-immutable="" src="https://socketimagescdn.azureedge.net/cdn/images/librariesprovider2/default-album/logo_socketmobile-black.png?sfvrsn=7a62c542_1" alt=""></div></div>
</div> </div> <div class="form-wrapper form-replacement-confirm col-md-7">
<!-- LOADER -->
<div id="loader" class="loader">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
<form id="payment-form" class="replacement-form"
data-server-error-text="We are very sorry but we are receiving an error when trying to connect to a third party server. Please contact our support at [email protected]"
data-model-text="Model:"
data-serialNumber-text="Serial #:"
data-problem-text="Problem:"
data-warranty-text="Warranty:"
data-name-text="Name:"
data-address-text="Address:"
data-email-text="Email:"
data-phone-text="Phone:"
data-company-text="Company:"
data-confirmationNumber-text="Confirmation/RMA #"
data-stripe-pkey="pk_live_PjOhCKqtvvtBHWdqvN8DeLNB00iwwcyD7f">
<!-- error -->
<div class="alert alert-danger alert-dismissible collapse" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="error-message"></div>
</div>
<div id="viewContainer">
<section>
<h2>Replacement Request</h2>
<h4 class="subtitle">Shipping Contact Info</h4>
<p class="text-intro">
Your scanner is under warranty. Complete your contact info and shipping address.
</p>
<div class="form-row form-group">
<div class="form-holder">
<label for="firstName">
First Name *
</label>
<input type="text"
id="firstName"
name="customer[firstName]"
class="form-control required" />
</div>
<div class="form-holder">
<label for="lastName">
Last Name *
</label>
<input type="text"
name="customer[lastName]"
id="lastName"
class="form-control required" />
</div>
</div>
<div class="form-row">
<label for="address1">
Address *
</label>
<input type="text"
id="address1"
name="customer[address][address1]"
class="form-control required"
placeholder="Street address"
style="margin-bottom: 20px"
maxlength="30" />
</div>
<div class="form-row">
<label for="address2">
Address
</label>
<input name="customer[address][address2]"
id="address2"
type="text"
class="form-control"
placeholder="Apartment, suite, unit etc. (optional)"
maxlength="30" />
</div>
<div class="form-row form-group">
<div class="form-holder">
<label for="phoneNumber">
Phone *
</label>
<input type="tel"
id="phoneNumber"
name="customer[phoneNumber]"
class="form-control required phoneAll" />
</div>
<div class="form-holder">
<label for="city">
City *
</label>
<input type="text"
id="city"
name="customer[address][city]"
class="form-control required" />
</div>
</div>
<div class="form-row">
<label for="country">
Country *
</label>
<div class="form-holder">
<select name="customer[address][country]"
id="country"
class="form-control required defaultInvalid">
<option value="" selected disabled hidden>
Choose a Country
</option>
</select>
<i class="zmdi zmdi-caret-down"></i>
</div>
</div>
<div class="form-row">
<label for="company">
Company
</label>
<input type="text"
id="company"
name="customer[company]"
class="form-control" />
</div>
<div class="form-row form-group">
<div class="form-holder">
<label for="zipcode">
Zip/Postal Code *
</label>
<input type="text"
id="zipcode"
name="customer[address][zipcode]"
class="form-control required" />
</div>
<div class="form-holder">
<label for="state">
State *
</label>
<select name="customer[address][state]"
id="state"
class="form-control required hidden">
<option value="" selected disabled hidden>
Choose a State
</option>
<option value="AL" class="option">Alabama</option>
<option value="AK" class="option">Alaska</option>
<option value="AZ" class="option">Arizona</option>
<option value="AR" class="option">Arkansas</option>
<option value="CA" class="option">California</option>
<option value="CO" class="option">Colorado</option>
<option value="CT" class="option">Connecticut</option>
<option value="DE" class="option">Delaware</option>
<option value="DC" class="option">District Of Columbia</option>
<option value="FL" class="option">Florida</option>
<option value="GA" class="option">Georgia</option>
<option value="HI" class="option">Hawaii</option>
<option value="ID" class="option">Idaho</option>
<option value="IL" class="option">Illinois</option>
<option value="IN" class="option">Indiana</option>
<option value="IA" class="option">Iowa</option>
<option value="KS" class="option">Kansas</option>
<option value="KY" class="option">Kentucky</option>
<option value="LA" class="option">Louisiana</option>
<option value="ME" class="option">Maine</option>
<option value="MD" class="option">Maryland</option>
<option value="MA" class="option">Massachusetts</option>
<option value="MI" class="option">Michigan</option>
<option value="MN" class="option">Minnesota</option>
<option value="MS" class="option">Mississippi</option>
<option value="MO" class="option">Missouri</option>
<option value="MT" class="option">Montana</option>
<option value="NE" class="option">Nebraska</option>
<option value="NV" class="option">Nevada</option>
<option value="NH" class="option">New Hampshire</option>
<option value="NJ" class="option">New Jersey</option>
<option value="NM" class="option">New Mexico</option>
<option value="NY" class="option">New York</option>
<option value="NC" class="option">North Carolina</option>
<option value="ND" class="option">North Dakota</option>
<option value="OH" class="option">Ohio</option>
<option value="OK" class="option">Oklahoma</option>
<option value="OR" class="option">Oregon</option>
<option value="PA" class="option">Pennsylvania</option>
<option value="RI" class="option">Rhode Island</option>
<option value="SC" class="option">South Carolina</option>
<option value="SD" class="option">South Dakota</option>
<option value="TN" class="option">Tenessee</option>
<option value="TX" class="option">Texas</option>
<option value="UT" class="option">Utah</option>
<option value="VT" class="option">Vermont</option>
<option value="VA" class="option">Virginia</option>
<option value="WA" class="option">Washington</option>
<option value="WV" class="option">West Virginia</option>
<option value="WI" class="option">Wisconsin</option>
<option value="WY" class="option">Wyoming</option>
</select>
</div>
</div>
<div class="form-row">
<label for="email">
Email *
</label>
<input type="email"
id="email"
name="customer[email]"
class="form-control required" />
</div>
<div class="form-row">
<label for="emailConfirm">
Confirm Email *
</label>
<input type="email"
name="customer[emailConfirm]"
id="emailConfirm"
class="form-control required" />
</div>
<div class="form-footer">
<a class="btn btn-primary btn-back" href="/services-and-support/replacement-scanner/confirm-scanner-info/">Back</a>
<a class="btn btn-primary btn-cancel" href="/services-and-support/replacement-scanner/">Cancel</a>
<a class="btn btn-primary btn-next" data-problem-identification-url="/services-and-support/replacement-scanner/problem-identification/"
data-replacement-identification-url="/services-and-support/replacement-scanner/replacement-identification/">
Next</a>
</div>
</section>
</div>
</form>
<div class="modal fade modal-fullscreen"
id='ModalPopup-1'
tabindex="-1"
role="dialog"
aria-labelledby="scannerNotFoundModalLabel"
data-binded-button="tellMeMoreBtn">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id='ModalPopup-1' style="display: inline-block;">
Replacement Process
</h4>
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p><strong>Replacement Process</strong></p><p>Scanner not working? Let us make correcting that easy and convenient. In the steps ahead we’ll need to identify your scanner and its warranty coverage, capture contact and shipping info, and a few details about your scanner’s problem.</p><p><strong> </strong></p><p><strong>Standard Service </strong></p><p>Our most economical service is our <em>Standard Service</em>. This service applies to scanners covered under our Standard Limited Warranty and to select SocketCare Extended Warranty plans. Under this service we ask that you ship the non-working scanner back to us. Upon receipt at the designated service center we’ll ship at no charge a replacement scanner via economy ground/surface shipping. The processing turnaround time upon receipt at a service center is 7 to 10-working days for scanners covered under our Standard Limited Warranty plan. SocketCare Extended Warranty plans receive accelerated turnaround processing according to the plan terms applicable.</p><p> </p><p>Standard service may be upgraded to our <em>Advanced Express Exchange Service</em> for fastest replacement (see below). Review your email confirmation/RMA# for availability and contact us to inquire.</p><p><strong> </strong></p><p><strong>Advanced Express Exchange Service</strong></p><p>Our fastest service is our <em>Advanced Express Exchange Service</em> whereby we ship first your replacement via express shipping. Upon receipt verify the replacement scanner’s functioning, and then return within 15 days the non-working scanner using the provided prepaid return shipping label and packaging.<strong></strong></p><p><strong> </strong></p>For scanners covered under a SocketCare Extended Warranty plan that includes our <em>Advance Express Exchange Service</em>, you’ll receive an email <p>confirmation/RMA# and we’ll begin processing your order immediately. </p><p> </p><p><strong>Upgrading to Advanced Express Exchange Service</strong></p><p>Our Advanced Express Exchange Service is available in our full coverage areas. A service fee applies. Review your email confirmation/RMA# for availablity of this service and contact us to utilize this service.</p><p> </p><p><strong>Customer Loyalty Program</strong></p><p>Scanners that are no longer covered under a warranty plan may be eligible under our <em>Customer Loyalty Program</em> for a refurbished scanner at a discount. Review your email confirmation for details.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap CSS -->
<div class="modal fade modal-fullscreen"
id='ModalPopup-2'
tabindex="-1"
role="dialog"
aria-labelledby="scannerNotFoundModalLabel"
data-binded-button="infoBoxLink">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id='ModalPopup-2' style="display: inline-block;">
Locating Scanner Info
</h4>
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p style="margin-bottom:10.5px;box-sizing:border-box;color:rgba(0, 0, 0, 0.65);font-family:Poppins;font-size:15px;background-color:#ffffff;">Quick navigation:</p>
<ul style="padding:0px;box-sizing:border-box;margin-top:0px;margin-bottom:10.5px;list-style:none;color:rgba(0, 0, 0, 0.65);font-family:Poppins;font-size:15px;background-color:#ffffff;">
<li style="box-sizing:border-box;"><a href="#socket700" style="color:#1a419c;box-sizing:border-box;background-color:transparent;text-decoration-line:none;">SocketScan 700-Series</a></li>
<li style="box-sizing:border-box;"><a href="#socket800" style="color:#1a419c;box-sizing:border-box;background-color:transparent;text-decoration-line:none;">SocketScan 800-Series</a></li>
<li style="box-sizing:border-box;"><a href="#durascan" style="color:#1a419c;box-sizing:border-box;background-color:transparent;text-decoration-line:none;">DuraScan 600-Series & 700-Series</a></li>
<li style="box-sizing:border-box;"><a href="#chs" style="color:#1a419c;box-sizing:border-box;background-color:transparent;text-decoration-line:none;">CHS 7-Series scanners</a></li>
</ul>
<p class="text-bold" style="margin-bottom:10.5px;box-sizing:border-box;font-weight:bold;color:rgba(0, 0, 0, 0.65);font-family:Poppins;font-size:15px;background-color:#ffffff;">Locating your scanner's Serial Number(SN) and/or Bluetooth Address (BT Addrs)</p>
<p style="margin-bottom:10.5px;box-sizing:border-box;color:rgba(0, 0, 0, 0.65);font-family:Poppins;font-size:15px;background-color:#ffffff;">If you have set up and registered your scanner using the Socket Mobile Companion App, the SN and BT Addrs have been captured and will display when requesting a replacement scanner. This is helpful if your product labelhas been damaged or is no longer
legible. If needed, you can also manually enter either the SN or BT Addrs during the replacement request process.</p>
<p style="margin-bottom:10.5px;box-sizing:border-box;color:rgba(0, 0, 0, 0.65);font-family:Poppins;font-size:15px;background-color:#ffffff;">The SN and/or BT Addrs are printed on the product labels on the exterior of your scanner, in the battery compartment, or a combination of both. For scanners that have a sealed battery, this information is limited to the exterior product label.</p>
<div
id="socket700" style="box-sizing:border-box;color:rgba(0, 0, 0, 0.65);font-family:Poppins;font-size:15px;background-color:#ffffff;">
<p class="text-bold" style="margin-bottom:10.5px;box-sizing:border-box;font-weight:bold;">SocketScan 700-Series</p>
<p style="margin-bottom:10.5px;box-sizing:border-box;">Models: S700, S730, S740</p>
<p style="margin-bottom:10.5px;box-sizing:border-box;">BT Addrs:> Located on the product label on the exterior of the scanner.</p>
<p style="margin-bottom:10.5px;box-sizing:border-box;">SN:Located in the battery compartment. Remove the battery door using a #2 Phillips screw driver to loosen the screw and remove the door.</p><img alt="01A SocketScan 700_label" data-displaymode="Original" sfref="[images|librariesProvider2]a296db81-4dfa-4b4c-b921-237666f2f6a9"
src="https://rma.socketmobile.com/images/librariesprovider2/default-album/01a-socketscan-700_label.jpg?sfvrsn=63a216a0_2" title="01A SocketScan 700_label" /></div>
<div id="socket800" style="box-sizing:border-box;color:rgba(0, 0, 0, 0.65);font-family:Poppins;font-size:15px;background-color:#ffffff;">
<p class="text-bold" style="margin-bottom:10.5px;box-sizing:border-box;font-weight:bold;">SocketScan 800-Series</p>
<p style="margin-bottom:10.5px;box-sizing:border-box;">Models: S800, S840, S850, S860</p>
<p style="margin-bottom:10.5px;box-sizing:border-box;">SN and BT Addrs: Located on product label on the exterior of the scanner. For the BT Addrs, omit the colon characters. Characters are limited to 0 thru 9, and A thru F (not case sensitive).</p><img alt="02A SocketScan 800_label" data-displaymode="Original"
sfref="[images|librariesProvider2]562a6bda-8c6b-439d-98ab-c01eb3f6c7af" src="https://rma.socketmobile.com/images/librariesprovider2/default-album/02a-socketscan-800_label.jpg?sfvrsn=2608823e_2" title="02A SocketScan 800_label" /></div>
<div id="durascan"
style="box-sizing:border-box;color:rgba(0, 0, 0, 0.65);font-family:Poppins;font-size:15px;background-color:#ffffff;">
<p class="text-bold" style="margin-bottom:10.5px;box-sizing:border-box;font-weight:bold;">DuraScan 600-Series & 700-Series</p>
<p style="margin-bottom:10.5px;box-sizing:border-box;">Models: D600, D700, D730, D740, D750, D760, D790</p>
<p style="margin-bottom:10.5px;box-sizing:border-box;">SN:Located on product label on the exterior of the scanner.</p>
<p style="margin-bottom:10.5px;box-sizing:border-box;">BT Addrs:Not shown on the product label. However, setting up and registering your scanner via the Socket Mobile Companion App soon after purchase will capture this info within the app and make it available should you need to request a replacement
scanner.
</p><img alt="03A DuraScan_label" data-displaymode="Original" sfref="[images|librariesProvider2]4bb059d8-12bd-4e52-ba72-1f593387a9a8" src="https://rma.socketmobile.com/images/librariesprovider2/default-album/03a-durascan_label.jpg?sfvrsn=2281b988_2"
title="03A DuraScan_label" /></div>
<div id="chs" style="box-sizing:border-box;color:rgba(0, 0, 0, 0.65);font-family:Poppins;font-size:15px;background-color:#ffffff;">
<p class="text-bold" style="margin-bottom:10.5px;box-sizing:border-box;font-weight:bold;">CHS 7-Series scanners</p>
<p style="margin-bottom:10.5px;box-sizing:border-box;">Models 7Ci, 7Di, 7Mi, 7Pi, 7Qi,7Xi</p>
<p style="margin-bottom:10.5px;box-sizing:border-box;">SN:located in the battery compartment above the battery</p>
<p style="margin-bottom:10.5px;box-sizing:border-box;">BT Addrs:May be located on the product label above the battery or on the label beneath the battery. Omit the colon characters. Characters are limited to 0 thru 9, and A thru F (not case sensitive).</p>
<p style="margin-bottom:10.5px;box-sizing:border-box;">Removing battery door:Unlock and remove the battery door by using a thin coin to turn the lock (1/2” slotted round piece) under the scanner to a horizontal position (turn 90 degrees to orientate the slot side to side) and remove the door.</p><img
alt="04AA Series 7_label" data-displaymode="Original" sfref="[images|librariesProvider2]ae53d90a-7a4c-4900-8e7c-76ef87c675ca" src="https://rma.socketmobile.com/images/librariesprovider2/default-album/04aa-series-7_label.jpg?sfvrsn=f6db3fc8_2"
title="04AA Series 7_label" /></div>
</div>
</div>
</div>
</div>
<!-- Bootstrap CSS -->
We had a similar setup on our site, where we had a contact form with a "reason" drop-down we thought would be interesting to track. Our solution was to track the contact form submission as an Event and use the reason as the Label.
If you wanted to do the same, you would set an Event to trigger when the Next button is clicked (your event would not be form completion, then, but advancement from this page), and create a variable to populate the Label field.
Since the value of the option is not the name you probably want to send to GA, the code for the variable will be a little more complicated than ours. I would try this within a Custom JavaScript variable:
If you called that variable "Problem Category", your Event Label in GTM would be
{{Problem Category}}.Of course, whether you make this the Label or not, and how you assign the Category and Action, will be determined by your existing GA norms, but this will make the value of the drop-down available in GTM without any changes needed to the site itself.