{"id":3245,"date":"2023-11-20T14:27:36","date_gmt":"2023-11-20T12:27:36","guid":{"rendered":"https:\/\/liberty.ua?p=3245"},"modified":"2024-07-03T16:23:52","modified_gmt":"2024-07-03T13:23:52","slug":"how-to-use-the-form-in-gtm-yakshho-u-vas-contact-form-7","status":"publish","type":"post","link":"https:\/\/liberty.ua\/en\/library\/wiki\/yak-vidstezhuvaty-vidpravku-form-v-gtm-yakshho-u-vas-contact-form-7\/","title":{"rendered":"How to track form submissions in GTM if you have Contact Form 7"},"content":{"rendered":"

\"\"<\/p>\n

In this article, you'll learn how to set up form submission tracking in GTM.
\nWe have described the entire setup in four simple steps.<\/p>\n

Things to keep in mind when tracking Contact Form 7 form submissions<\/strong><\/p>\n

The Contact Form 7 plugin works on AJAX, which means that the page itself does not reload when the form is filled in and submitted.<\/p>\n

You won't be able to use the classic GTM form tracking tool here.<\/p>\n

Most often, this applies to single-page sites, but sites with a large number of pages can also have such forms.<\/p>\n

For such cases, we use event tracking, which is transmitted by the form itself when it is submitted.<\/p>\n

Adding a tag for tracking submission of Contact Forms 7<\/span><\/h2>\n

You need to add a tag in GTM: custom HTML.<\/p>\n

\"gtm<\/figure>\n

Add this code to it, taken from the official Contact Form7 website:<\/p>\n

<script\r\n  document.addEventListener( 'wpcf7mailsent', function( event ) {\r\n    window.dataLayer.push({\r\n      "event" : "cf7submission",\r\n      "formId" : event.detail.contactFormId,\r\n      "response" : event.detail.inputs\r\n    })\r\n  });\r\n<\/script<\/code><\/pre>\n
\"unnamed<\/figure>\n
Let's see how everything works. Click on \"Preview\" in the upper right corner. If GTM is installed correctly, you'll see an orange icon with the following message \"Previewing the Default Workspace\"<\/p>\n
Next, go to our website. A special window should appear at the bottom of the browser screen. We submit the form again and see the following in it:<\/p>\n
\"1<\/figure>\n
Pay attention to the name of the event, as this is what we will need for further configuration:\u00a0cf7submission<\/strong>.<\/p>\n
Setting up triggers and variables to track Contact Form 7 form submissions<\/span><\/h2>\n
You need to create several triggers<\/strong><\/p>\n
You need to go to the \"Triggers<\/strong>\" in the left menu and click \"Create<\/strong>\".<\/p>\n
Specify the name by which you will distinguish it. Choose the type of trigger \"Custom event<\/strong>\"<\/p>\n
Insert \"cf7submission<\/strong>\"<\/p>\n
\"unnamed<\/figure>\n
Now it's time to set up the variables. Let's take a closer look at what exactly the form returns when you submit it:<\/p>\n
\"unnamed<\/figure>\n
Everything that follows the word \"response<\/strong>\", and the numbering is sequential, starting from 0.<\/p>\n
It is in this form that I am particularly interested in email, but in general, you may have a different key field.
\nThe result is a variable with the value response.2.value (check if I have defined the string correctly)
\nGo to the \"Variables.<\/strong>\" and in the section \"Custom variables<\/strong>\" click \"Create<\/strong>\"<\/p>\n
\n
\n
Need help setting up website conversions?<\/div>\n
\n
We will set everything up for you!<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Choose \"Data level variable<\/strong>\"<\/p>\n
\"2<\/figure>\n
In the name, insert what we got: response.2.value<\/p>\n
\"unnamed<\/figure>\n
If you have several forms on your site, I recommend adding the formId variable. It is created in the same way.<\/p>\n
\"id<\/figure>\n
We need to check how everything works. Again, go to the preview in the GTM and navigate to our form page. If everything is set up correctly, you will see the form correctly displayed, including the formId.<\/p>\n
\"unnamed<\/figure>\n
Google Universal Analytics tag to track form submissions Contact Form 7<\/span><\/h2>\n
We're halfway there! Let's set up a custom Google Universal Analytics tag.
\nLet's go to the\u00a0Tags.<\/strong>\u00a0and press \"Create<\/strong>\". Select it in the Google Universal Analytics tag configuration.
\nOf course, at this stage, you should have Google Analytics installed.<\/p>\n
\"1<\/figure>\n
Tracking type:\u00a0Event.<\/strong>
\nCategory:\u00a0Submission Form<\/strong>
\nAction is our variable\u00a0FormID<\/strong>
\nThe label is our variable\u00a0email<\/strong>
\nGoogle Analytics settings:\u00a0Google Analytics variable<\/strong>
\nTrigger our tag\u00a0cf7 submit<\/strong><\/p>\n
Setting goals in Google Analytics when tracking Contact Form submissions 7<\/span><\/h2>\n
Go to Google Analytics.<\/p>\n
Enter the mode\u00a0Administrator\u00a0<\/strong>(lower left corner of the screen), then go to the \"Objectives.<\/strong>\"<\/p>\n
\"1<\/figure>\n
Press \"Objective.<\/strong>\". We need \"Own<\/strong>\"<\/p>\n
\"3<\/figure>\n
Category:\u00a0Submission Form<\/strong>
\nAction:\u00a0Form ID: 3807<\/strong><\/p>\n
\"4<\/figure>\n
Congratulations! You have set up form submission tracking on your website!<\/p>","protected":false},"excerpt":{"rendered":"
\u0423 \u0446\u0456\u0439 \u0441\u0442\u0430\u0442\u0442\u0456 \u0432\u0438 \u0434\u0456\u0437\u043d\u0430\u0454\u0442\u0435\u0441\u044f, \u044f\u043a \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u0442\u0438 \u0432\u0456\u0434\u0441\u0442\u0435\u0436\u0435\u043d\u043d\u044f \u043d\u0430\u0434\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0444\u043e\u0440\u043c \u0447\u0435\u0440\u0435\u0437 GTM. \u0412\u0441\u0435 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043c\u0438 \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0437\u0430 \u0447\u043e\u0442\u0438\u0440\u0438 \u043f\u0440\u043e\u0441\u0442\u0438\u0445 \u043a\u0440\u043e\u043a\u0438….<\/p>","protected":false},"author":1,"featured_media":3246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","inline_featured_image":false,"footnotes":""},"categories":[25],"tags":[],"class_list":["post-3245","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wiki"],"_links":{"self":[{"href":"https:\/\/liberty.ua\/en\/wp-json\/wp\/v2\/posts\/3245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liberty.ua\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/liberty.ua\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/liberty.ua\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/liberty.ua\/en\/wp-json\/wp\/v2\/comments?post=3245"}],"version-history":[{"count":1,"href":"https:\/\/liberty.ua\/en\/wp-json\/wp\/v2\/posts\/3245\/revisions"}],"predecessor-version":[{"id":3247,"href":"https:\/\/liberty.ua\/en\/wp-json\/wp\/v2\/posts\/3245\/revisions\/3247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/liberty.ua\/en\/wp-json\/wp\/v2\/media\/3246"}],"wp:attachment":[{"href":"https:\/\/liberty.ua\/en\/wp-json\/wp\/v2\/media?parent=3245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liberty.ua\/en\/wp-json\/wp\/v2\/categories?post=3245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/liberty.ua\/en\/wp-json\/wp\/v2\/tags?post=3245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}