{"id":10636,"date":"2024-11-16T10:16:44","date_gmt":"2024-11-16T10:16:44","guid":{"rendered":"https:\/\/ceowebltd.com\/blog\/?p=10636"},"modified":"2024-11-16T10:16:44","modified_gmt":"2024-11-16T10:16:44","slug":"how-to-track-ajax-form-submissions-with-google-tag-manager","status":"publish","type":"post","link":"https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/","title":{"rendered":"How to track AJAX form submissions with Google Tag Manager"},"content":{"rendered":"<p>Tracking AJAX form submissions with Google Tag Manager (GTM) can be a little tricky because the form submission happens asynchronously (without a full page reload). This means traditional form submission tracking methods won\u2019t work, but there are still ways to set up accurate tracking for AJAX-based form submissions.<\/p>\n<p>Here\u2019s a step-by-step guide to help you track AJAX form submissions using Google Tag Manager.<\/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-ajax-form-submissions-with-google-tag-manager\/#Step_1_Add_the_GTM_Data_Layer_to_Your_Site\" title=\"Step 1: Add the GTM Data Layer to Your Site\">Step 1: Add the GTM Data Layer to Your Site<\/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-ajax-form-submissions-with-google-tag-manager\/#Step_2_Detect_AJAX_Form_Submission\" title=\"Step 2: Detect AJAX Form Submission\">Step 2: Detect AJAX Form Submission<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/#Example_jQuery_AJAX_submission\" title=\"Example (jQuery AJAX submission):\">Example (jQuery AJAX submission):<\/a><\/li><\/ul><\/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-ajax-form-submissions-with-google-tag-manager\/#Step_3_Create_a_Custom_Event_Trigger_in_GTM\" title=\"Step 3: Create a Custom Event Trigger in GTM\">Step 3: Create a Custom Event Trigger in GTM<\/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-ajax-form-submissions-with-google-tag-manager\/#Step_4_Create_a_Tag_to_Send_Data_to_Google_Analytics_or_other_platforms\" title=\"Step 4: Create a Tag to Send Data to Google Analytics (or other platforms)\">Step 4: Create a Tag to Send Data to Google Analytics (or other platforms)<\/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-ajax-form-submissions-with-google-tag-manager\/#Step_5_Test_the_Setup_in_GTM\" title=\"Step 5: Test the Setup in GTM\">Step 5: Test the Setup in GTM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/#Step_6_Publish_the_Changes\" title=\"Step 6: Publish the Changes\">Step 6: Publish the Changes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/#Optional_Advanced_Customization\" title=\"Optional: Advanced Customization\">Optional: Advanced Customization<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Add_the_GTM_Data_Layer_to_Your_Site\"><\/span>Step 1: Add the GTM Data Layer to Your Site<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>First, ensure that the Google Tag Manager container is added to your website. It should already be included if you&#8217;re using GTM, but check to make sure that the GTM container snippet is present on all pages of your site.<\/p>\n<p>For tracking AJAX form submissions, we\u2019ll use the <code>dataLayer.push<\/code> method to send events to GTM. Here\u2019s the standard GTM data layer setup:<\/p>\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\">html<\/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-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><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><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Detect_AJAX_Form_Submission\"><\/span>Step 2: Detect AJAX Form Submission<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Since AJAX form submissions don\u2019t trigger a traditional form submission event (like a page reload), we need to detect when the form submission happens and push relevant data into the <code>dataLayer<\/code>.<\/p>\n<p>To do this, you&#8217;ll need to add a small JavaScript code snippet to your website that listens for AJAX form submission success. If you are using a jQuery-based form or any AJAX handler, you can hook into the success callback and push an event to the <code>dataLayer<\/code>.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Example_jQuery_AJAX_submission\"><\/span>Example (jQuery AJAX submission):<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>If you\u2019re using jQuery to submit the form via AJAX, you can hook into the form\u2019s <code>success<\/code> event and push an event into the <code>dataLayer<\/code>:<\/p>\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-string\">'#yourFormID'<\/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><br \/>\n  <span class=\"hljs-keyword\">var<\/span> form = $(<span class=\"hljs-variable language_\">this<\/span>);<\/p>\n<p>  $.<span class=\"hljs-title function_\">ajax<\/span>({<br \/>\n    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'POST'<\/span>,<br \/>\n    <span class=\"hljs-attr\">url<\/span>: form.<span class=\"hljs-title function_\">attr<\/span>(<span class=\"hljs-string\">'action'<\/span>),<br \/>\n    <span class=\"hljs-attr\">data<\/span>: form.<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 event into dataLayer on successful AJAX submission<\/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\">'ajaxFormSubmit'<\/span>,  <span class=\"hljs-comment\">\/\/ Custom event name<\/span><br \/>\n        <span class=\"hljs-string\">'formId'<\/span>: <span class=\"hljs-string\">'yourFormID'<\/span>,     <span class=\"hljs-comment\">\/\/ ID of the form<\/span><br \/>\n        <span class=\"hljs-string\">'formAction'<\/span>: form.<span class=\"hljs-title function_\">attr<\/span>(<span class=\"hljs-string\">'action'<\/span>),  <span class=\"hljs-comment\">\/\/ Action URL of the form<\/span><br \/>\n        <span class=\"hljs-string\">'formData'<\/span>: {<br \/>\n          <span class=\"hljs-string\">'field1'<\/span>: $(<span class=\"hljs-string\">'#field1'<\/span>).<span class=\"hljs-title function_\">val<\/span>(),<br \/>\n          <span class=\"hljs-string\">'field2'<\/span>: $(<span class=\"hljs-string\">'#field2'<\/span>).<span class=\"hljs-title function_\">val<\/span>()<br \/>\n        }<br \/>\n      });<br \/>\n    },<br \/>\n    <span class=\"hljs-attr\">error<\/span>: <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">error<\/span>) {<br \/>\n      <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-string\">'Error:'<\/span>, error);<br \/>\n    }<br \/>\n  });<br \/>\n});<br \/>\n<\/code><\/div>\n<\/div>\n<p>In the above example, we\u2019re sending the form data (like <code>field1<\/code> and <code>field2<\/code> values) to the <code>dataLayer<\/code> on a successful AJAX submission. You can replace <code>#yourFormID<\/code> with the actual ID of your form and include any form fields you want to track.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Create_a_Custom_Event_Trigger_in_GTM\"><\/span>Step 3: Create a Custom Event Trigger in GTM<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once the data is being pushed into the <code>dataLayer<\/code>, you need to create a trigger in Google Tag Manager to capture the event and fire a tag. In this case, we\u2019ll use the custom event <code>ajaxFormSubmit<\/code> we defined in the previous step.<\/p>\n<ol>\n<li><strong>Go to Google Tag Manager<\/strong>:\n<ul>\n<li>Navigate to <strong>Triggers<\/strong> in GTM.<\/li>\n<li>Click <strong>New<\/strong> to create a new trigger.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Configure Trigger Type<\/strong>:\n<ul>\n<li>Select <strong>Custom Event<\/strong> as the trigger type.<\/li>\n<li>In the <strong>Event Name<\/strong> field, enter the event name you used in the <code>dataLayer.push<\/code> (e.g., <code>ajaxFormSubmit<\/code>).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Configure Trigger Conditions (Optional)<\/strong>:\n<ul>\n<li>If you want to track specific forms, you can set additional conditions. For instance, you can check the <code>formId<\/code> variable to only fire this trigger for certain forms:\n<ul>\n<li>Choose <strong>Some Custom Events<\/strong>.<\/li>\n<li>Set the condition to <code>formId equals yourFormID<\/code> (replace <code>yourFormID<\/code> with the actual form ID or another form-specific identifier).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>Save the Trigger<\/strong>.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Create_a_Tag_to_Send_Data_to_Google_Analytics_or_other_platforms\"><\/span>Step 4: Create a Tag to Send Data to Google Analytics (or other platforms)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>After creating the trigger, the next step is to set up a tag that will fire when the form is successfully submitted.<\/p>\n<ol>\n<li><strong>Go to Google Tag Manager<\/strong>:\n<ul>\n<li>Navigate to <strong>Tags<\/strong>.<\/li>\n<li>Click <strong>New<\/strong> to create a new tag.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Select the Tag Type<\/strong>:\n<ul>\n<li>For Google Analytics (Universal Analytics), select the <strong>Google Analytics: Universal Analytics<\/strong> tag type.<\/li>\n<li>Choose the <strong>Track Type<\/strong> as <strong>Event<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Configure the Event Tracking Parameters<\/strong>:\n<ul>\n<li>In the <strong>Category<\/strong> field, you can specify a name for the event (e.g., <code>Form<\/code>).<\/li>\n<li>In the <strong>Action<\/strong> field, you can use the dynamic value from the <code>dataLayer<\/code>, such as the form ID or action URL, like <code>{{formId}}<\/code> or <code>{{formAction}}<\/code>.<\/li>\n<li>Optionally, you can also add more details in the <strong>Label<\/strong> or <strong>Value<\/strong> fields (e.g., form fields).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Choose the Trigger<\/strong>:\n<ul>\n<li>Select the <strong>Custom Event<\/strong> trigger you created earlier (e.g., <code>ajaxFormSubmit<\/code>).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Save the Tag<\/strong>.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_5_Test_the_Setup_in_GTM\"><\/span>Step 5: Test the Setup in GTM<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Before deploying the changes, make sure to test the setup in <strong>Preview Mode<\/strong> to ensure that the tag fires correctly when the AJAX form is submitted.<\/p>\n<ol>\n<li>Click on <strong>Preview<\/strong> in GTM and enter your website URL.<\/li>\n<li>Once the preview mode is activated, interact with the form and submit it.<\/li>\n<li>Check the <strong>GTM Debug Console<\/strong> to confirm that the <code>ajaxFormSubmit<\/code> event is detected and the tag fires correctly.<\/li>\n<\/ol>\n<p>You can also open the browser\u2019s <strong>Developer Console<\/strong> to check the <code>dataLayer<\/code> content:<\/p>\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_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-variable language_\">window<\/span>.<span class=\"hljs-property\">dataLayer<\/span>);<br \/>\n<\/code><\/div>\n<\/div>\n<p>This will help you verify that the data is being pushed to the <code>dataLayer<\/code> as expected.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_6_Publish_the_Changes\"><\/span>Step 6: Publish the Changes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once you\u2019ve confirmed everything is working in Preview Mode, you can publish your GTM container to make the tracking live.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Optional_Advanced_Customization\"><\/span>Optional: Advanced Customization<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>Track specific form fields<\/strong>: You can modify the <code>dataLayer.push<\/code> event to capture specific form field values (e.g., email, phone number) and pass them into GTM.<\/li>\n<li><strong>Track form errors<\/strong>: You can also track failed AJAX submissions by adding an error handler to the AJAX call. Push an event to <code>dataLayer<\/code> if the form submission fails.<\/li>\n<li><strong>Multiple forms<\/strong>: If you have multiple forms, you can use dynamic form IDs, and adjust your triggers and tags accordingly to track them individually.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>By using the <code>dataLayer.push<\/code> method, you can effectively track AJAX form submissions with Google Tag Manager. The key is to detect the successful submission of the AJAX form using JavaScript and then push an event to the <code>dataLayer<\/code>. After that, GTM can fire tags based on that event, allowing you to track form submissions for Google Analytics, Google Ads, or other platforms.<\/p>\n<p>This method ensures that even asynchronous form submissions are tracked accurately, enabling you to capture valuable data for further analysis and optimization.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tracking AJAX form submissions with Google Tag Manager (GTM) can be a little tricky because the form submission happens asynchronously (without a full 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-10636","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 AJAX form submissions with 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-ajax-form-submissions-with-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 AJAX form submissions with Google Tag Manager - CEOweb Ltd. Blog\" \/>\n<meta property=\"og:description\" content=\"Tracking AJAX form submissions with Google Tag Manager (GTM) can be a little tricky because the form submission happens asynchronously (without a full page reload)....\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/\" \/>\n<meta property=\"og:site_name\" content=\"CEOweb Ltd. Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-16T10:16:44+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-ajax-form-submissions-with-google-tag-manager\/\",\"url\":\"https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/\",\"name\":\"How to track AJAX form submissions with Google Tag Manager - CEOweb Ltd. Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#website\"},\"datePublished\":\"2024-11-16T10:16:44+00:00\",\"dateModified\":\"2024-11-16T10:16:44+00:00\",\"author\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f\"},\"breadcrumb\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ceowebltd.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to track AJAX form submissions with 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 AJAX form submissions with 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-ajax-form-submissions-with-google-tag-manager\/","og_locale":"en_US","og_type":"article","og_title":"How to track AJAX form submissions with Google Tag Manager - CEOweb Ltd. Blog","og_description":"Tracking AJAX form submissions with Google Tag Manager (GTM) can be a little tricky because the form submission happens asynchronously (without a full page reload)....","og_url":"https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/","og_site_name":"CEOweb Ltd. Blog","article_published_time":"2024-11-16T10:16:44+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-ajax-form-submissions-with-google-tag-manager\/","url":"https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/","name":"How to track AJAX form submissions with Google Tag Manager - CEOweb Ltd. Blog","isPartOf":{"@id":"https:\/\/ceowebltd.com\/blog\/#website"},"datePublished":"2024-11-16T10:16:44+00:00","dateModified":"2024-11-16T10:16:44+00:00","author":{"@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f"},"breadcrumb":{"@id":"https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ceowebltd.com\/blog\/how-to-track-ajax-form-submissions-with-google-tag-manager\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ceowebltd.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to track AJAX form submissions with 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\/10636","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=10636"}],"version-history":[{"count":1,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10636\/revisions"}],"predecessor-version":[{"id":10637,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10636\/revisions\/10637"}],"wp:attachment":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/media?parent=10636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/categories?post=10636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/tags?post=10636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}