Issue using Javascript Extension to Capture Form Submit via utag.link?

[cale_rubenstein]

I have the following code in a Javascript Extension which I am using to capture a successful form submit on our Order Confirmation page. jQuery("#checkout.co-login.simpleMastHd div.container_24 div.sb-found-wrap section div.chk-container div.chk-wrap--conf.chk-wrap div.grd-row div.grd-columns.grd-small-12 div.grd-row-10 div.chk-right.grd-gutter-left-half.grd-columns.grd-small-4 div.chk-conf-rewards-wrap.chk-box div.grd-flush.grd-row div.chk-box-section.grd-columns.grd-small-12 div.chk-box-rewards-sign-up-form-wrapper form.chk-conf-sign-up.chk-info-form").on("submit",function(e){ utag.link({cm_element_id: 'ACCOUNT: SIGNUP: SUCCESS: ORDER CONFIRMATION', cm_element_category: 'ACCOUNT: SIGNUP'}); }); cm_element_id and cm_element_category are then mapped to eid and ecat in Coremetrics, respectively, in order to fire an Element Tag. This code works and fires an Element tag when entered into the Javascript console on Google Chrome. However, when this code is placed in a Javascript Extension and scoped to DOM Ready, Coremetrics, or Preloader, I am not seeing the Element tag fire. What is the reason this might be happening?

[wes_contreras]

That's the same method I used successfully to capture a form submission recently, and it worked when I scoped the JavaScript Extension to DOM Ready. Does it work if you drop the same code into a jQuery onReady function on the page? If not, the node you're attaching to may not exist at onReady, which would explain why it doesn't work when triggered from Tealium.

[gacp]

In relation to Wes's response, this is best done on DOM ready, although the only thing that could make that fail is having this load prior to jQuery, and it all depends on how and where jQuery loading. However, the one thing that pops out at me is that your selector is VERY definite and perhaps the form is not qualifying because something in the selector is not matching. The other possibility is that the form is going through some client side validation and the initial .submit event is being captured and stopped. It's really hard to determine a cause without actually seeing the site. Either way, validation is something you definitely want to keep in mind or else this would trigger any time the user clicks submit even if the form fails to do so.

[gilbert_martin]

Hey Cale, It sounds like the form may not exist when the handler attempts to attach to the DOM. If that's the case, you can try using the delegation feature in jQuery to fix this by attaching the following code in a javascript extension scoped to DOM ready. You'll notice that it's very similar to what you already have set up: jQuery("body").on("submit", '#checkout.co-login.simpleMastHd div.container_24 div.sb-found-wrap section div.chk-container div.chk-wrap--conf.chk-wrap div.grd-row div.grd-columns.grd-small-12 div.grd-row-10 div.chk-right.grd-gutter-left-half.grd-columns.grd-small-4 div.chk-conf-rewards-wrap.chk-box div.grd-flush.grd-row div.chk-box-section.grd-columns.grd-small-12 div.chk-box-rewards-sign-up-form-wrapper form.chk-conf-sign-up.chk-info-form', function(e){ utag.link({cm_element_id: 'ACCOUNT: SIGNUP: SUCCESS: ORDER CONFIRMATION', cm_element_category: 'ACCOUNT: SIGNUP'}); }); You can find more information about delegation using the .on() handler under the Direct and delegated events section here: http://api.jquery.com/on/ Let us know if that helps.

[cale_rubenstein]

Hi Gilbert, I didn't see that working, no. I did have success (in the Javascript console, not via an extension) with the following: jQuery("#div.chk-box-rewards-sign-up-form-wrapper").on("submit", 'chk-info-form chk-conf-sign-up', function(e){ utag.link({cm_element_id: 'ACCOUNT: SIGNUP: SUCCESS: ORDER CONFIRMATION', cm_element_category: 'ACCOUNT: SIGNUP'}); }); In the Javascript console, but placed in an Extension scoped to DOM Ready it did not work. Could other extensions be interfering?

[gilbert_martin]

Hey Cale, It could be that there's a separate function that's handling the submit for that form for things like validation, which Olaf mentions earlier in the thread. It's difficult to tell without an in depth investigation of the page though. Please get in touch with your account manager and we'd be happy to take look.