{"id":10744,"date":"2024-11-20T20:37:22","date_gmt":"2024-11-20T20:37:22","guid":{"rendered":"https:\/\/ceowebltd.com\/blog\/?p=10744"},"modified":"2024-11-20T20:37:22","modified_gmt":"2024-11-20T20:37:22","slug":"how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager","status":"publish","type":"post","link":"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/","title":{"rendered":"How to track form submissions on AJAX forms using Google Tag Manager"},"content":{"rendered":"<p>Tracking form submissions on AJAX-based forms using Google Tag Manager (GTM) can be a bit tricky because AJAX forms don\u2019t trigger the traditional page reload event when a form is submitted. Instead, AJAX forms typically submit data in the background and update parts of the page dynamically without a full page refresh. Therefore, GTM\u2019s built-in form submission trigger won\u2019t work for these types of forms.<\/p>\n<p>To track AJAX form submissions, you can follow a set of steps to capture the event using Google Tag Manager. Here\u2019s how to track form submissions on AJAX forms:<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_73 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/#Step_1_Ensure_the_AJAX_Form_Trigger_is_Firing\" title=\"Step 1: Ensure the AJAX Form Trigger is Firing\">Step 1: Ensure the AJAX Form Trigger is Firing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/#Step_2_Set_Up_the_Data_Layer_to_Capture_Form_Submissions\" title=\"Step 2: Set Up the Data Layer to Capture Form Submissions\">Step 2: Set Up the Data Layer to Capture Form Submissions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/#Step_3_Set_Up_a_Trigger_in_GTM_for_the_Custom_Event\" title=\"Step 3: Set Up a Trigger in GTM for the Custom Event\">Step 3: Set Up a Trigger in GTM for the Custom Event<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/#Step_4_Set_Up_the_Tag_for_Tracking_the_Form_Submission\" title=\"Step 4: Set Up the Tag for Tracking the Form Submission\">Step 4: Set Up the Tag for Tracking the Form Submission<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/#Step_5_Test_the_Form_Submission_Tracking\" title=\"Step 5: Test the Form Submission Tracking\">Step 5: Test the Form Submission Tracking<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Ensure_the_AJAX_Form_Trigger_is_Firing\"><\/span>Step 1: Ensure the AJAX Form Trigger is Firing<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Since AJAX forms do not cause a page refresh, we need to detect when the form is successfully submitted and when the AJAX call completes. There are two main approaches to achieve this:<\/p>\n<ul>\n<li><strong>Using JavaScript\/jQuery events<\/strong>: Many AJAX form submissions trigger JavaScript events on success or failure. You can listen to these events and push them into the GTM data layer.<\/li>\n<li><strong>Listening for DOM changes<\/strong>: If the form submission results in dynamic content changes (e.g., a thank-you message or confirmation), you can use GTM to listen for DOM changes and trigger your tag when they occur.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Set_Up_the_Data_Layer_to_Capture_Form_Submissions\"><\/span>Step 2: Set Up the Data Layer to Capture Form Submissions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To ensure that the form submission event is sent to GTM, we can push the form submission event to the GTM <strong>Data Layer<\/strong>. The data layer is a JavaScript object that GTM listens to for events and data.<\/p>\n<ol>\n<li><strong>Add a Custom JavaScript Event to the AJAX Form<\/strong>:\n<ul>\n<li>In the AJAX success callback or at the end of the form submission process, use JavaScript to push a custom event to the data layer.<\/li>\n<li>Example code to add to the form submission handler:<\/li>\n<\/ul>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">javascript<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\">&lt;script&gt;<br \/>\n<span class=\"hljs-comment\">\/\/ Example using jQuery, adjust based on your form's setup<\/span><br \/>\n$(<span class=\"hljs-string\">'form#your-form-id'<\/span>).<span class=\"hljs-title function_\">on<\/span>(<span class=\"hljs-string\">'submit'<\/span>, <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">e<\/span>) {<br \/>\n  e.<span class=\"hljs-title function_\">preventDefault<\/span>(); <span class=\"hljs-comment\">\/\/ Prevent the default form submission<\/span><\/p>\n<p>  <span class=\"hljs-comment\">\/\/ Perform AJAX submission (replace with your AJAX call)<\/span><br \/>\n  $.<span class=\"hljs-title function_\">ajax<\/span>({<br \/>\n    <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'your-ajax-submit-url'<\/span>,<br \/>\n    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'POST'<\/span>,<br \/>\n    <span class=\"hljs-attr\">data<\/span>: $(<span class=\"hljs-variable language_\">this<\/span>).<span class=\"hljs-title function_\">serialize<\/span>(),<br \/>\n    <span class=\"hljs-attr\">success<\/span>: <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">response<\/span>) {<br \/>\n      <span class=\"hljs-comment\">\/\/ Push an event to the data layer after the form is successfully submitted<\/span><br \/>\n      <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">dataLayer<\/span> = <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">dataLayer<\/span> || [];<br \/>\n      <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">dataLayer<\/span>.<span class=\"hljs-title function_\">push<\/span>({<br \/>\n        <span class=\"hljs-string\">'event'<\/span>: <span class=\"hljs-string\">'ajaxFormSubmission'<\/span>,  <span class=\"hljs-comment\">\/\/ Custom event name<\/span><br \/>\n        <span class=\"hljs-string\">'formName'<\/span>: <span class=\"hljs-string\">'Contact Form'<\/span>     <span class=\"hljs-comment\">\/\/ Add any custom variables to track<\/span><br \/>\n      });<br \/>\n    },<br \/>\n    <span class=\"hljs-attr\">error<\/span>: <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">xhr, status, error<\/span>) {<br \/>\n      <span class=\"hljs-comment\">\/\/ Handle error (if needed)<\/span><br \/>\n    }<br \/>\n  });<br \/>\n});<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<p>In this example:<\/p>\n<ul>\n<li><strong>&#8216;event&#8217;: &#8216;ajaxFormSubmission&#8217;<\/strong> is the custom event name that GTM will listen for.<\/li>\n<li>You can also add custom variables, such as <code>formName<\/code>, to identify which form was submitted.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Alternative for Non-jQuery Forms<\/strong>: If you\u2019re not using jQuery, you can achieve the same using vanilla JavaScript:\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">javascript<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">'your-form-id'<\/span>).<span class=\"hljs-title function_\">addEventListener<\/span>(<span class=\"hljs-string\">'submit'<\/span>, <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">e<\/span>) {<br \/>\n  e.<span class=\"hljs-title function_\">preventDefault<\/span>();<\/p>\n<p>  <span class=\"hljs-comment\">\/\/ Example AJAX request with Fetch API<\/span><br \/>\n  <span class=\"hljs-title function_\">fetch<\/span>(<span class=\"hljs-string\">'your-ajax-submit-url'<\/span>, {<br \/>\n    <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">'POST'<\/span>,<br \/>\n    <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">FormData<\/span>(<span class=\"hljs-variable language_\">this<\/span>),<br \/>\n  })<br \/>\n  .<span class=\"hljs-title function_\">then<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">response<\/span> =&gt;<\/span> response.<span class=\"hljs-title function_\">json<\/span>())<br \/>\n  .<span class=\"hljs-title function_\">then<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">data<\/span> =&gt;<\/span> {<br \/>\n    <span class=\"hljs-comment\">\/\/ Push event to dataLayer on successful form submission<\/span><br \/>\n    <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">dataLayer<\/span> = <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">dataLayer<\/span> || [];<br \/>\n    <span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">dataLayer<\/span>.<span class=\"hljs-title function_\">push<\/span>({<br \/>\n      <span class=\"hljs-string\">'event'<\/span>: <span class=\"hljs-string\">'ajaxFormSubmission'<\/span>,<br \/>\n      <span class=\"hljs-string\">'formName'<\/span>: <span class=\"hljs-string\">'Contact Form'<\/span><br \/>\n    });<br \/>\n  })<br \/>\n  .<span class=\"hljs-title function_\">catch<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">error<\/span> =&gt;<\/span> {<br \/>\n    <span class=\"hljs-comment\">\/\/ Handle error if needed<\/span><br \/>\n  });<br \/>\n});<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Set_Up_a_Trigger_in_GTM_for_the_Custom_Event\"><\/span>Step 3: Set Up a Trigger in GTM for the Custom Event<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now that the form submission event is pushed to the data layer, the next step is to configure Google Tag Manager to listen for this event and fire the appropriate tag.<\/p>\n<ol>\n<li><strong>Create a Trigger for the Custom Event<\/strong>:\n<ul>\n<li>In Google Tag Manager, go to the <strong>Triggers<\/strong> section and click <strong>New<\/strong>.<\/li>\n<li>Choose the trigger type <strong>Custom Event<\/strong>.<\/li>\n<li>In the <strong>Event Name<\/strong> field, enter the custom event name you pushed to the data layer. In this example, it would be <code>ajaxFormSubmission<\/code>.<\/li>\n<li>Optionally, add additional conditions, such as firing the trigger only for certain form names (e.g., based on the <code>formName<\/code> variable).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Set Trigger Conditions (Optional)<\/strong>:\n<ul>\n<li>If you want to track different forms, you can add a condition to only trigger the event for a specific form. For instance, if the data layer includes the <code>formName<\/code>, you can add a condition like:\n<ul>\n<li><strong>Form Name equals &#8216;Contact Form&#8217;<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>Save the Trigger<\/strong>:\n<ul>\n<li>After setting up the custom event trigger, save it.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Set_Up_the_Tag_for_Tracking_the_Form_Submission\"><\/span>Step 4: Set Up the Tag for Tracking the Form Submission<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once you\u2019ve created the custom event trigger, you can now set up the tag that will be fired when the AJAX form is submitted.<\/p>\n<ol>\n<li><strong>Create a New Tag in GTM<\/strong>:\n<ul>\n<li>Go to the <strong>Tags<\/strong> section in GTM and click <strong>New<\/strong>.<\/li>\n<li>Choose the tag type based on what you want to track. Common tags for form submissions include:\n<ul>\n<li><strong>Google Analytics Event<\/strong> (for tracking form submissions as events).<\/li>\n<li><strong>Google Ads Conversion Tracking<\/strong> (for tracking form submissions as conversions).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>Configure the Tag<\/strong>:\n<ul>\n<li>For a <strong>Google Analytics Event<\/strong>:\n<ul>\n<li>Set <strong>Category<\/strong> to something like &#8220;Form Submission&#8221;.<\/li>\n<li>Set <strong>Action<\/strong> to the form\u2019s name or ID (e.g., <code>Contact Form<\/code>).<\/li>\n<li>Optionally, set a <strong>Label<\/strong> to include additional context, like the page URL.<\/li>\n<\/ul>\n<\/li>\n<li>For <strong>Google Ads Conversion Tracking<\/strong>:\n<ul>\n<li>Enter the conversion ID and label from your Google Ads account.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>Assign the Trigger<\/strong>:\n<ul>\n<li>In the tag configuration, assign the trigger you created in Step 3 (i.e., the <strong>ajaxFormSubmission<\/strong> trigger).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Save and Publish<\/strong>:\n<ul>\n<li>Once the tag is set up and the trigger is assigned, click <strong>Save<\/strong> and then <strong>Publish<\/strong> your changes.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_5_Test_the_Form_Submission_Tracking\"><\/span>Step 5: Test the Form Submission Tracking<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Before going live, it&#8217;s essential to test your setup:<\/p>\n<ol>\n<li><strong>Use GTM\u2019s Preview Mode<\/strong>:\n<ul>\n<li>Click <strong>Preview<\/strong> in Google Tag Manager to enter Debug Mode.<\/li>\n<li>Visit your website and fill out the form.<\/li>\n<li>After submission, check the GTM debug console at the bottom of the page to ensure that the <strong>ajaxFormSubmission<\/strong> event is firing and that the associated tag is triggering.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Verify in Google Analytics<\/strong>:\n<ul>\n<li>If you&#8217;re tracking form submissions in Google Analytics, go to the <strong>Real-Time<\/strong> reports to see if the event shows up.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Use Tag Assistant (Chrome Extension)<\/strong>:\n<ul>\n<li>You can also use the <strong>Google Tag Assistant<\/strong> Chrome extension to verify that your tags are firing correctly on your website.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>By following these steps, you can successfully track AJAX form submissions using Google Tag Manager. The key is to push the form submission event into the GTM data layer during the AJAX form submission process and then configure GTM to listen for this custom event. With this setup, you can track form submissions on dynamic, AJAX-powered forms without relying on traditional page reloads.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tracking form submissions on AJAX-based forms using Google Tag Manager (GTM) can be a bit tricky because AJAX forms don\u2019t trigger the traditional page reload&#8230;<\/p>\n","protected":false},"author":214,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-10744","post","type-post","status-publish","format-standard","hentry","category-digital-marketing"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to track form submissions on AJAX forms using Google Tag Manager - CEOweb Ltd. Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to track form submissions on AJAX forms using Google Tag Manager - CEOweb Ltd. Blog\" \/>\n<meta property=\"og:description\" content=\"Tracking form submissions on AJAX-based forms using Google Tag Manager (GTM) can be a bit tricky because AJAX forms don\u2019t trigger the traditional page reload...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/\" \/>\n<meta property=\"og:site_name\" content=\"CEOweb Ltd. Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-20T20:37:22+00:00\" \/>\n<meta name=\"author\" content=\"Emmanuel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emmanuel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/\",\"url\":\"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/\",\"name\":\"How to track form submissions on AJAX forms using Google Tag Manager - CEOweb Ltd. Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#website\"},\"datePublished\":\"2024-11-20T20:37:22+00:00\",\"dateModified\":\"2024-11-20T20:37:22+00:00\",\"author\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f\"},\"breadcrumb\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ceowebltd.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to track form submissions on AJAX forms using Google Tag Manager\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/#website\",\"url\":\"https:\/\/ceowebltd.com\/blog\/\",\"name\":\"CEOweb Ltd. Blog\",\"description\":\"Guest Posting - Digital Marketing &amp; Web Services\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ceowebltd.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f\",\"name\":\"Emmanuel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g\",\"caption\":\"Emmanuel\"},\"url\":\"https:\/\/ceowebltd.com\/blog\/author\/emmanuel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to track form submissions on AJAX forms using Google Tag Manager - CEOweb Ltd. Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/","og_locale":"en_US","og_type":"article","og_title":"How to track form submissions on AJAX forms using Google Tag Manager - CEOweb Ltd. Blog","og_description":"Tracking form submissions on AJAX-based forms using Google Tag Manager (GTM) can be a bit tricky because AJAX forms don\u2019t trigger the traditional page reload...","og_url":"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/","og_site_name":"CEOweb Ltd. Blog","article_published_time":"2024-11-20T20:37:22+00:00","author":"Emmanuel","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Emmanuel","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/","url":"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/","name":"How to track form submissions on AJAX forms using Google Tag Manager - CEOweb Ltd. Blog","isPartOf":{"@id":"https:\/\/ceowebltd.com\/blog\/#website"},"datePublished":"2024-11-20T20:37:22+00:00","dateModified":"2024-11-20T20:37:22+00:00","author":{"@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f"},"breadcrumb":{"@id":"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ceowebltd.com\/blog\/how-to-track-form-submissions-on-ajax-forms-using-google-tag-manager\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ceowebltd.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to track form submissions on AJAX forms using Google Tag Manager"}]},{"@type":"WebSite","@id":"https:\/\/ceowebltd.com\/blog\/#website","url":"https:\/\/ceowebltd.com\/blog\/","name":"CEOweb Ltd. Blog","description":"Guest Posting - Digital Marketing &amp; Web Services","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ceowebltd.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f","name":"Emmanuel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g","caption":"Emmanuel"},"url":"https:\/\/ceowebltd.com\/blog\/author\/emmanuel\/"}]}},"_links":{"self":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/users\/214"}],"replies":[{"embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/comments?post=10744"}],"version-history":[{"count":1,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10744\/revisions"}],"predecessor-version":[{"id":10745,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10744\/revisions\/10745"}],"wp:attachment":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/media?parent=10744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/categories?post=10744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/tags?post=10744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}