问题描述
我目前正在尝试跟踪表单中有关下拉问题的所有答案。
我的第一个想法是通过form.submit方法完成此操作，但是此表单不会作为一个触发器触发。表单提交仅在单击链接时触发。
以下是我要跟踪的表单的一部分。当您第一次单击它以打开下拉菜单时，google tag会触发一个点击触发器。但是，当您单击选项时，不会触发点击触发器。
我想跟踪的下拉问题，
这是下面的下拉HTML
HTML形式的下拉菜单，
<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>这是下面的表单提交HTML，
我一直认为最好的解决方案是通过dataLayer将其转换为表单？但是我不是开发人员，所以不确定在什么位置添加代码。
提前谢谢！ ：）
<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>预先感谢您：）
如果有帮助的话，这里也是页面源的副本
<!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 support@socketmobile.com"
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.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.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.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.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.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.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.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.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.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 -->解决方法
我们在网站上进行了类似的设置，在该网站上有一个联系表，带有一个“原因”下拉列表，我们认为这很有趣。我们的解决方案是将联系表单的提交作为事件进行跟踪，并使用原因作为标签。
如果您要这样做，则可以将一个事件设置为在单击“下一步”按钮时触发（您的事件不是表单完成，而是从该页面前进），并创建一个变量以填充Label字段。
由于该选项的值不是您可能要发送给GA的名称，因此该变量的代码将比我们的代码复杂一些。我会在自定义JavaScript变量中尝试使用此方法：
function() {
var selected = document.getElementById('problemId').selectedOptions;
return selected[0].label;
}
如果您将该变量称为“问题类别”，则GTM中的事件标签将为{{Problem Category}}。
当然，您是否将其设置为标签，以及如何分配类别和操作，将由现有的GA规范确定，但这将使下拉菜单的值在GTM中可用，而无需进行任何更改网站本身需要。
设置时间 控制面板
错误1：Request method ‘DELETE‘ not supported 错误还原：...