{"id":4719,"date":"2024-12-24T12:59:02","date_gmt":"2024-12-24T12:59:02","guid":{"rendered":"https:\/\/helpcenter.greyd.io\/greyd-forms-tracking-de\/"},"modified":"2024-12-26T18:29:16","modified_gmt":"2024-12-26T17:29:16","slug":"greyd-forms-tracking-de","status":"publish","type":"post","link":"https:\/\/helpcenter.greyd.io\/de\/greyd-forms-tracking-de\/","title":{"rendered":"How to set up Google Tag Manager event Tracking for Greyd.Forms"},"content":{"rendered":"<p>This article explains, how you can track form events from your Greyd.Forms forms in Google Analytics using the Google Tag Manager.<\/p>\n<p><\/p>\n<h3>Step 1: Create variables<\/h3>\n<p>The variables ensure that a Greyd form is recognized on a page and that the form CSS ID, form post ID and form name are read out. The form CSS ID is used to recognize the correct form in the DOM, the other two to pass on the form recognition data to Google Analytics.<\/p>\n<ul>\n<li>This is done using the CSS selectors: <\/li>\n<li>\u201cform.greyd_form\u201d \u2192 id (form CSS ID)<\/li>\n<li>\u201cform.greyd_form\u201d \u2192 data-id (form post ID)<\/li>\n<li> \u201cform.greyd_form\u201d \u2192 data-title (form name)<\/li>\n<\/ul>\n<p><\/p>\n<p>Go to &quot;Variables&quot; and create 3 new variables:<\/p>\n<p><img decoding=\"async\" alt=\"Screenshot of GTM variables configuration\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/6752da97ad0fad3167fdf9f2\/file-30fbsZfQLY.png\" style=\"width: 100%;max-width: 100%\" \/><\/p>\n<p><img decoding=\"async\" alt=\"Screenshot of GTM variables configuration\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/6752da981a19c80ee3288f19\/file-NjkZHaSZKz.png\" style=\"width: 100%;max-width: 100%\" \/><\/p>\n<p><img decoding=\"async\" alt=\"Screenshot of GTM variables configuration\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/6752da9854eccc6fa86c4463\/file-cSqAebIfZk.png\" style=\"width: 100%;max-width: 100%\" \/><\/p>\n<p><\/p>\n<h3 id=\"Step-2-Create-triggers-gbN7V\">Step 2: Configure triggers<\/h3>\n<p>Go to &quot;Triggers&quot; and configure at least the first one:<\/p>\n<ul>\n<li>\n<p><strong>GA4 Form Trigger<\/strong><\/p>\n<p>The first trigger ensures that the GA4 Form Submission tag is called when the event with the name \u201cgreydFormSubmission\u201d is recognized.<\/p>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" alt=\"Screenshot of GTM trigger configuration\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/6752da9854eccc6fa86c4462\/file-rX5pYVH664.png\" style=\"width: 100%;max-width: 100%\" \/><\/p>\n<ul>\n<li>\n<p><b>Exclude<\/b> <strong>WordPress Backend <\/strong><\/p>\n<p>The second trigger is optional. It ensures that a page view is always prevented from being tracked in the WordPress backend. Depending on how the Tag Manager script was integrated, this can be important. <\/p>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" alt=\"Screenshot of GTM trigger configuration\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/6752da9754eccc6fa86c4461\/file-EKbKZvocsy.png\" style=\"width: 100%;max-width: 100%\" \/><\/p>\n<p><\/p>\n<p><strong>Step 3: Configure Tags<\/strong><\/p>\n<p>Go to &quot;Tags&quot; and configure the following tags:<\/p>\n<ul>\n<li><strong>GreydFormSubmission Script<\/strong><\/li>\n<\/ul>\n<p>This tag plays a script that checks whether a form is submitted. After the form has been submitted, the \u201cgreydFormSubmission\u201d event is triggered and the \u201cGA4 Form Trigger\u201d is activated. This also writes the data layer variables on the form page.<\/p>\n<p><img decoding=\"async\" alt=\"Screenshot of GTM tag configuration\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/6752da9749bdd76212d40445\/file-of52TlXNTg.png\" style=\"width: 100%;max-width: 100%\" \/><\/p>\n<p><code class=\"inline-code\">&lt;script&gt; jQuery(document).ready( function() { jQuery(document).on(&#039;submit&#039;, function(event) { dataLayer.push ({ &#039;event&#039; : &#039;greydFormSubmission&#039;, &#039;GreydformID&#039; : {{Greyd Form ID}}, &#039;GreydformName&#039; : {{Greyd Form Name}} }); }); }); &lt;\/script&gt;<\/code> <\/p>\n<p><\/p>\n<ul>\n<li><strong>GA4 Form Submission<\/strong><\/li>\n<\/ul>\n<p>This tag contains the measurement ID of the Google Analytics account and defines the data that is transferred to the Google Analytics account. It is triggered by the \u201cGA4 Form Trigger\u201d trigger.<\/p>\n<p><img decoding=\"async\" alt=\"Screenshot of GTM tag configuration\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/6752da9876742c542a574a25\/file-WzwyK4EeC2.png\" style=\"width: 100%;max-width: 100%\" \/><\/p>\n<ul>\n<li>If you have already created your GA4 property in Google Analytics and generated a data stream, you can copy the measurement ID for the GA4 configuration tag here.<\/li>\n<\/ul>\n<p><img decoding=\"async\" alt=\"Screenshot of GTM data streems dashboard\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/6752da98550bac2614d8e389\/file-hTbt9Dh3dO.png\" style=\"width: 100%;max-width: 100%\" \/><\/p>\n<p><strong>Step 4: Check data in Google Analytics<\/strong><\/p>\n<p>Once you have set this up, you can now call up a form for testing, fill and submit it. It may take a few seconds for the data to appear in the real-time report. If a caching plugin is installed on the page, we recommend to delete the cache first.<\/p>\n<p><img decoding=\"async\" alt=\"Screenshot of GTM real time report with a successful form tracking\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/6752da98ad0fad3167fdf9f3\/file-qjcLLlkynN.png\" style=\"width: 100%;max-width: 100%\" \/><\/p>\n<p>After 24 hours you will also find the data in the Engagement report:<\/p>\n<p><img decoding=\"async\" alt=\"Screenshot of GTM engagement report with a successful form tracking\" src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/633fe4617d798e2cbfa12154\/images\/6752da9849bdd76212d40446\/file-8FSpv1bF3n.png\" style=\"width: 100%;max-width: 100%\" \/><\/p>\n<p>Please note: For the form tracking in Google Tag Manager to work, there cannot be more than one form on a page.<\/p>\n<p><\/p>\n<p><a href=\"https:\/\/helpcenter.greyd.io\/wp-content\/uploads\/sites\/5\/2024\/12\/GTM-PP8C36JJ_workspace16.json\" target=\"_blank\">This is a container export of the GTM settings.<\/a><\/p>\n<p>You can upload it to your Google Tag Manager and replace the anonymous mess-ID with yours. Please note: Use the merge mode if you already have a configuration in your account that you want to keep. Otherwise the upload will overwrite it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article explains, how you can track form events from your Greyd.Forms forms in Google Analytics using the Google Tag Manager. Step 1: Create variables The variables ensure that a Greyd form is recognized on a page and that the form CSS ID, form post ID and form name are read out. The form CSS [&hellip;]<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"greyd_block_editor_preview":[],"footnotes":""},"categories":[188],"tags":[],"topics":[800],"class_list":["post-4719","post","type-post","status-publish","format-standard","hentry","category-general","topics-forms-popups-de"],"lang":"de","translations":{"de":4719},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/posts\/4719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/comments?post=4719"}],"version-history":[{"count":2,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/posts\/4719\/revisions"}],"predecessor-version":[{"id":4836,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/posts\/4719\/revisions\/4836"}],"wp:attachment":[{"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/media?parent=4719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/categories?post=4719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/tags?post=4719"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/helpcenter.greyd.io\/wp-json\/wp\/v2\/topics?post=4719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}