{"id":770,"date":"2018-07-25T14:15:08","date_gmt":"2018-07-25T13:15:08","guid":{"rendered":"https:\/\/www.gironi.it\/blog\/?p=770"},"modified":"2024-09-20T14:02:58","modified_gmt":"2024-09-20T13:02:58","slug":"tracciare-i-moduli-cf7-tag-manager","status":"publish","type":"post","link":"https:\/\/www.gironi.it\/blog\/tracciare-i-moduli-cf7-tag-manager\/","title":{"rendered":"Come tracciare i moduli CF7 con Tag Manager in maniera semplice"},"content":{"rendered":"\n<p>Quello che voglio \u00e8 creare un evento Google Analytics ogni qual volta un utente compila e invia correttamente un modulo in un sito WordPress che usa il comunissimo plugin Contact Form 7.<\/p>\n\n\n\n<p>Ho letto in rete varie soluzioni, molte delle quali sofisticate, altre inutilmente complesse, altre molto sofisticate.<br>Per scopi basilari, basta seguire questi semplici passi:&nbsp;&nbsp;<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\"> <br>1 &#8211; Creo il primo tag sfruttando\u00a0wpcf7mailsent<\/h2>\n\n\n\n<p>Apro Google Tag Manager e creo un nuovo Tag, scegliendo come tipologia \u201c<em>html personalizzato<\/em>\u201d. Nel mio esempio l\u2019ho chiamato \u201c<em>mailsent-cf7<\/em>\u201d.<\/p>\n\n\n\n<p>All&#8217;interno del tag digito poche righe di codice:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;script&gt;\ndocument.addEventListener( 'wpcf7mailsent', function( event ) {  dataLayer.push({'event': 'contactForm7Inviato'});  }, false );\n&lt;\/script&gt;<script> document.addEventListener( 'wpcf7mailsent', function( event ) { &lt;br>dataLayer.push({'event': 'contactForm7Inviato'}); &lt;br>}, false ); &lt;br><\/script><\/pre>\n\n\n\n<p>\n\nIn pratica, quello che vedo in Tag Manager \u00e8 questo:\n\n<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"875\" src=\"https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/configuro-tag1.jpg\" alt=\"CF7 Tag Manager\" class=\"wp-image-780\" srcset=\"https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/configuro-tag1.jpg 1600w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/configuro-tag1-300x164.jpg 300w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/configuro-tag1-1024x560.jpg 1024w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/configuro-tag1-1200x656.jpg 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<p><strong>wpcf7mailsent \u00e8 un evento DOM di CF7 che si attiva quando un modulo ajax \u00e8 stato inviato con successo, e la mail \u00e8 partita.<br><\/strong><br>In pratica, \u00e8 tutto ci\u00f2 che ci serve.<\/p>\n\n\n\n<p>A questo punto scelgo su quali pagine del sito attivare il tag (<em>tutte le pagine<\/em> pu\u00f2 essere un\u2019opzione che va bene in molti casi&#8230;). Salvo il mio nuovo tag.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"https:\/\/rcm-eu.amazon-adsystem.com\/e\/cm?ref=qf_sp_asin_til&amp;t=consulenzeinf-21&amp;m=amazon&amp;o=29&amp;p=8&amp;l=as1&amp;IS2=1&amp;asins=8894277909&amp;linkId=08e36901f80b029c7074c7b5daeecae7&amp;bc1=FFFFFF&amp;lt1=_blank&amp;fc1=333333&amp;lc1=0066C0&amp;bg1=FFFFFF&amp;f=ifr\">\n    <\/iframe>\n<iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"https:\/\/rcm-eu.amazon-adsystem.com\/e\/cm?ref=qf_sp_asin_til&amp;t=consulenzeinf-21&amp;m=amazon&amp;o=29&amp;p=8&amp;l=as1&amp;IS2=1&amp;asins=1542690234&amp;linkId=4065fa7dace2de164f5340d566d1a91a&amp;bc1=FFFFFF&amp;lt1=_blank&amp;fc1=333333&amp;lc1=0066C0&amp;bg1=FFFFFF&amp;f=ifr\">\n    <\/iframe>\n<iframe style=\"width:120px;height:240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"https:\/\/rcm-eu.amazon-adsystem.com\/e\/cm?ref=qf_sp_asin_til&amp;t=consulenzeinf-21&amp;m=amazon&amp;o=29&amp;p=8&amp;l=as1&amp;IS2=1&amp;asins=B008JWQ35M&amp;linkId=f6ba8a312974fe714d933a1355a3d777&amp;bc1=FFFFFF&amp;lt1=_blank&amp;fc1=333333&amp;lc1=0066C0&amp;bg1=FFFFFF&amp;f=ifr\">\n    <\/iframe>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2 &#8211; Il mio tag Universal Analytics <\/h2>\n\n\n\n<p>\n\nCreo ora un <strong>nuovo tag di tipo Google Universal Analytics<\/strong>.<br>Diciamo che lo posso chiamare &#8220;<em>Invio form CF7<\/em>&#8220;:\n\n<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"856\" src=\"https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/configuro-tag2.jpg\" alt=\"\" class=\"wp-image-782\" srcset=\"https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/configuro-tag2.jpg 1600w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/configuro-tag2-300x160.jpg 300w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/configuro-tag2-1024x548.jpg 1024w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/configuro-tag2-1200x642.jpg 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<p>Scelgo <strong>monitoraggio evento<\/strong>. <\/p>\n\n\n\n<p>Inserisco il mio id di monitoraggio e scelgo un valore per <strong>Categoria<\/strong>, <strong>Azione<\/strong> ed <strong>Etichetta<\/strong><\/p>\n\n\n\n<p>Nel mio caso ho scelto &#8220;<em>Form<\/em>&#8221; per categoria, &#8220;<em>Invio&#8221;<\/em>&nbsp;per azione e il path della pagina come etichetta.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3 &#8211; L&#8217;evento personalizzato<\/h2>\n\n\n\n<p>Per attivare il tag creo un nuovo attivatore di tipo &#8220;<em>evento personalizzato&#8221;<\/em>&nbsp;&#8211; io l\u2019ho chiamato &#8220;<em>form inviato&#8221;<\/em>&nbsp;&#8211; e seleziono come evento <strong>contactForm7Inviato<\/strong>:  <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"867\" src=\"https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/attivatore.png\" alt=\"\" class=\"wp-image-783\" srcset=\"https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/attivatore.png 1600w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/attivatore-300x163.png 300w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/attivatore-1024x555.png 1024w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/attivatore-1200x650.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">4 &#8211; Anteprima e controlli<\/h2>\n\n\n\n<p>Non mi resta che fare l&#8217;<strong>anteprima in Google Tag Manager<\/strong> per sincerarmi che tutto funzioni come previsto:  <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1581\" height=\"453\" src=\"https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/anteprima.jpg\" alt=\"\" class=\"wp-image-774\" srcset=\"https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/anteprima.jpg 1581w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/anteprima-300x86.jpg 300w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/anteprima-1024x293.jpg 1024w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/anteprima-1200x344.jpg 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<p>\n\ne aprire il sito per vedere se \u00e8 tutto a posto:\n\n<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1138\" height=\"272\" src=\"https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/dom.jpg\" alt=\"\" class=\"wp-image-775\" srcset=\"https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/dom.jpg 1138w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/dom-300x72.jpg 300w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/dom-1024x245.jpg 1024w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption>con l&#8217;anteprima di Tag Manager posso aprire il sito e vedere cosa succede&#8230;<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Come si vede, \u00e8 tutto ok. Ora provo a inviare un modulo e posso notare subito se &#8220;scatta&#8221; l&#8217;evento, vedendolo anche in real time su Google Analytics.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"743\" src=\"https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/risultato.jpg\" alt=\"\" class=\"wp-image-776\" srcset=\"https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/risultato.jpg 1600w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/risultato-300x139.jpg 300w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/risultato-1024x476.jpg 1024w, https:\/\/www.gironi.it\/blog\/wp-content\/uploads\/2018\/07\/risultato-1200x557.jpg 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption>vedo subito che tutto \u00e8 andato bene&#8230;<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Tutto funziona: in meno di 10 minuti il mio tracciamento \u00e8 attivo.<br>Posso pubblicare la nuova versione in Tag Manager.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quello che voglio \u00e8 creare un evento Google Analytics ogni qual volta un utente compila e invia correttamente un modulo in un sito WordPress che usa il comunissimo plugin Contact Form 7. Ho letto in rete varie soluzioni, molte delle quali sofisticate, altre inutilmente complesse, altre molto sofisticate.Per scopi basilari, basta seguire questi semplici passi:&nbsp;&nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[715,719],"tags":[835,727],"class_list":["post-770","post","type-post","status-publish","format-standard","hentry","category-analytics-it","category-tag-manager-it","tag-cf7-it","tag-tag-manager-it"],"lang":"it","translations":{"it":770},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false},"uagb_author_info":{"display_name":"paolo","author_link":"https:\/\/www.gironi.it\/blog\/author\/paolo\/"},"uagb_comment_info":422,"uagb_excerpt":"Quello che voglio \u00e8 creare un evento Google Analytics ogni qual volta un utente compila e invia correttamente un modulo in un sito WordPress che usa il comunissimo plugin Contact Form 7. Ho letto in rete varie soluzioni, molte delle quali sofisticate, altre inutilmente complesse, altre molto sofisticate.Per scopi basilari, basta seguire questi semplici passi:&nbsp;&nbsp;","_links":{"self":[{"href":"https:\/\/www.gironi.it\/blog\/wp-json\/wp\/v2\/posts\/770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gironi.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gironi.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gironi.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gironi.it\/blog\/wp-json\/wp\/v2\/comments?post=770"}],"version-history":[{"count":1,"href":"https:\/\/www.gironi.it\/blog\/wp-json\/wp\/v2\/posts\/770\/revisions"}],"predecessor-version":[{"id":3168,"href":"https:\/\/www.gironi.it\/blog\/wp-json\/wp\/v2\/posts\/770\/revisions\/3168"}],"wp:attachment":[{"href":"https:\/\/www.gironi.it\/blog\/wp-json\/wp\/v2\/media?parent=770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gironi.it\/blog\/wp-json\/wp\/v2\/categories?post=770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gironi.it\/blog\/wp-json\/wp\/v2\/tags?post=770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}