I have a form like the following:
<form id="form-12" data-length="120" data-height="240">
<!-- different input fields -->
</form>
I can track the formSubmit event but what i need to include into the event are the values inside the data-attributes. How is this possible with Google Tag Manager? Do i need to to this with Javascript or is there another solution?
Open GTM preview, submit the form, select the form submit event in the preview and inspect the state of your variables on the submit event. You can use any of them.
You won't have the data-attributes among them, however.
You will have to use JS to parse out all the attributes on formSubmit if the attributes are still there on it.
It's worse if they're not. Then you would have to make them available for the future submit on pageload, on button click or on a different suitable trigger.
Related
I'm trying to do something which I think should be doable, but I'm having problems with. Here are my requirements:
I need to check that four values on a webform form are entered.
I need to allow a user to submit the data on a button click.
The button has some text and has some fontawesome icons in it.
When the data is submitted, I need to turn off the button so that the user does not inadvertently click it again and submit the exact same data the second time.
Get the required popups from bootstrap on an insert/update of data, assuming some data has not been entered.
I am only able to get pieces of this working. Here is what I have tried:
An asp:LinkButton. I can get everything but the bootstrap required popups. I found that this seems to be caused because bootstrap required looks for a button of type "submit".
An asp:Button. I can get everything but the fontawesome icons. I found that I can actually insert this on a jquery document ready method, but I get all kinds of asp .net security violations when I try this. I simply can't open this up.
A button tag with a runat="server" on it. I've tied this in with the asp.net button click event like below. Unfortunately, when I click the button, if there is a client side onclick event handler, the server side click event never gets called. I am able to style the button like a link. This is the option that seems to get me the closest. Unfortunately, I seem to be able to get the client side onclick event or the server side onserverclick event, but not both. I'm open to any and all suggestions here.
<button type="submit" ID="btnSubmission" runat="server"
onserverclick="lbCaseUpdate_Click"
class="buttonAsLink nav-link pl-0" ><i class="fa fa-pen fa-fw"></i> Update</button>
What I need is a button/link that activates the "required" display in bootstrap, contains the fontawesome icons, runs some client side javascript to somehow communicate an update is occurring, turns off the input button, and then performs the server side operation. I don't see how to get it. I'm open to any and all suggestions.
TIA
I had a website where there was a link to a hotel booking engine and had been using onSubmit to record a form submission as an event.
However it didn't seem to be recording properly - the figures were too low.
So, I thought that maybe changing to onClick would help - so the code on the form would look like this:
<form id="bookingEngine"
class="bookingEngine"
name="bookingEngine"
action="redirect.php"
method=POST
target="_blank"
onClick="ga('send', 'event', 'Booking', 'Website');
">
This works, except now the figures are much higherand look as if maybe overreporting?
Is this right, could the onClick on a form tag be recording something other than the number of forms submitted?
A more simplistic explanation would be that the onclick tracks when an element is clicked, regardless of the outcome or the context in which the element was clicked, whereas the onbusmit tracks when a form button is clicked and the form successfully submitted. So if there were errors in the form that invalidated the form, and it doesn't get submitted, then the onsubmit action would not occur.
When I create a tag to listen for form submissions using Google Tag Manager.
For my ajax submitted form which does not go to a new page, the submission of a form does not fire the gtm.formSubmit event into the data layer.
What should I do instead?
I need a "codeless" solution to detect form submission and to capture the submitted values.
I ran into another potential reason for this as well and thought I'd drop it in here.
In the Form Submit Listener, you need to have Check Validation unticked for AJAX forms (if the Submit button is blocked from doing a normal submit, as you would do with AJAX forms, this option blocks the listener from firing the correct event).
I have an ajax submitted form and the formSubmit click listener and event tags are working for me.
You might be doing this already, but just to double check;
You are adding 2 tags - the formSubmit listener and the Analytics event tag for that event?
Are you setting up the filters correctly (i.e. including event equals gtm.formSubmit, and the appropriate page?)
If it still isn't working, another suggestion is to use a simple click listener, then filter for both the page the form is on and the id of the submit button.
Here is how Google recommends doing it.
Add a basic page tracking tag (i.e. Tag Type of Google Analytics or Universal Analytics; Track Type of Page View) if you don't already have one. This tag must fire on all pages.
Add a tag of type Event Listener > Form Submit Listener. You can name it “Form Submit Listener”. Add a single firing rule of "All pages", or, for the specific page(s) on which you want to listen for form submissions.
Add a rule (named "Form Submit" for example) with the following condition:
{{event}} equals gtm.formSubmit
Add an Analytics event tracking tag (i.e. Tag Type of Google Analytics or Universal Analytics; Track Type of Event). Add the rule you created in the previous step as the firing rule (for example, "Form Submit"). Enter a Category, Action, and and Label for the event. For example, you might use the following:
Category "Forms"
Action "Submit"
Label "Lead Gen".
Save a version of the container and publish it.
I want to validate some asp.net textboxes with the jQuery Validation plugin found at
http://docs.jquery.com/Plugins/Validation, but it appears that the elements must be between a form tag. If I have just a couple elements, I would hardly call that a form, so I would rather not have them wrapped inside a form element. Is there a way around this? Also, if I have two buttons on the form, a cancel and a submit button and I want the form only to validate when the submit button is clicked, but not the cancel button, how is this accomplished?
I have just a couple elements, I would
hardly call that a form, so I would
rather not have them wrapped inside a
form element.
If the elements are not within a form tag, then it is not a valid HTML document, so behavior within script might get wonky depending on how the browser deals with the malformed HTML.
Most browsers will create a form implicitly, but now you have no control over the form's behavior. The defaults are usually be a post action form targeted at the requested page's URL.
The problem is, you probably have no idea what selector to use in the JQuery to get a reference to the form... but I suppose $("form") would do the trick.
validate when the submit button is clicked, but not the cancel button
The plug-in intercepts and runs on the submit event of a form. Generally cancel buttons are html input elements with the type attribute set to "reset":
<input type="reset" value="cancel" />
A reset type button will not cause the form to submit, and this will not trigger the validation.
If you use another button type, make sure the onclick even returns false. This cancels the form's submit action but still allows you to run javasctipt of your own when the button is clicked.
The jquery validate plugin requires a form element to function, so you should have your form fields (no matter how few) contained inside a form.
You can tell the validation plugin not to operate on form submission, then manually validate the form when the correct submit button is clicked.
For example, using a class to identify the correct submit button:
$(document).ready(function() {
var form = $("form");
form.validate({
onsubmit: false,
});
//Validate form only if validation submit button is clicked
//Allows cancel submit buttons to function properly
$('.validate', form).click(function() {
if (form.valid()) {
form.submit();
}
else {
form.validate().form();
}
});
});
I'm using a coda slider like consctuct on one of my pages. Naturally, the anchor ("#currentTab") information is lost after a postback. This is annoying because when you press a button on a certain tab, you always end up on the first tab after the postback.
What is the best way of letting this information survive a postback?
Try this is your page_load event
Me.Form.Attributes("onsubmit") = "this.action+=top.location.hash;"
I'm not doing in ASP, but as a general solution attempt this might work for you too:
create a hidden field within the form that you send
on tab change, fill in the value for this selected tab (if there are no values for identifying the tabs, create them)
when rendering the page after submit, create a piece of javascript on the fly, which switches the tab on DOM:ready.
Either execute your postback as an AJAX request, or add some javascript to the form that will send the anchor value to the server
Rough example
<form onsubmit="this.anchor.value=top.location.hash">
<input name="anchor" type="hidden" value="">
<!-- rest of form -->
</form>
Then you'll need a convention to return it to the client and perform the appropriate action.