CF7-lomakeseuranta-google-tag-managerilla
Blogi

Contact Form 7 -lomakeseuranta Google Tag Managerilla

Koska päädyit tälle sivulle, olet ehkä huomannut, että Google Tag Managerin automaattinen lomakeseuranta antaa väärää tietoa Contact Form 7 lomakkeiden lähetyksistä. Contact Form 7 vaatii Tag Manageriin omat custom määrityksensä, jotta seuranta toimii oikein. Alla ohjeet siitä miten laitat Contact Form 7 (CF7) -lomakkeet seurantaan Google Tag Managerin (GTM) kautta. Otathan huomioon, että ohje on tehty helmikuussa 2023 ja kattaa lomakeseurannan Google Analytics 4 -tapahtumien kautta. Jos määritys tuntuu liian vaikealta, ota meihin yhteyttä niin hoidamme homman puolestasi.

CF7 Listener

Ihan ensimmäiseksi sinun pitää luoda muokattu HTML-tapahtuma Tag Manageriin, joka tunnistaa onnistuneen Contact Form 7-lomakelähetyksen.

contact-form-7-listener
1. Luo Tag Manageriin uusi Tagi ja valitse tagin tyypiksi muokattu HTML, jonka jälkeen lisää html kenttään tämä html-koodi:

<script>
document.addEventListener( ’wpcf7mailsent’, function( event ) {
window.dataLayer.push({
”event” : ”cf7submission”,
”formId” : event.detail.contactFormId,
”response” : event.detail.inputs
})
});
</script>

2. Määritä tagi triggeröitymään kaikilla sivuilla “All pages”.

3. Tallenna tapahtuma ja testaa sen toimivuus Esikatselu-osiossa. Esikatselu näyttää sinulle mitä Tag Managerissa tapahtuu kun esim. klikkailet sivustosi elementtejä.

Triggeri

Seuraavaksi tarvitaan triggeri, joka aktivoituu kun lomake on lähetetty. Hyödynnämme tässä triggerissä äsken luomaamme CF7 Listener tagia.

Luo uusi Triggeri. Valitse tyypiksi muokattu tapahtuma ja laita tapahtuman nimeksi: cf7submission. Lopuksi anna triggerille jokin nimi, josta tunnistat sen. Tallenna triggeri.

google-tag-manager-triggeri

Lomakeseuranta-Tagi

Lopuksi lomakeseuranta edellyttää tagia, joka lähettää GA4:ään tapahtuman lomaketäytöstä.

Luo uusi Tagi. Valitse GA4-tapahtuma. Lisää olemassa oleva GA4-määritystagi ja lisää tapahtumalle nimi, joka näkyy GA4:ssa. Valitse Triggeriksi edellisessä kohdassa luotu cf7submission -triggeri. Anna tagille jokin nimi ja tallenna.

google-tag-manager-lomakeseuranta-tagi

Aktivoi lomakeseuranta

Lopuksi testaa taas Esikatselussa, että tagi toimii oikein. Tag Managerin keräämät tapahtumatiedot näkyvät myös GA4:ssa Reaaliaikaisissa raporteissa, joten näet toimivuuden myös sieltä kun teet lomakkeen testilähetyksen.

Kun tagi toimii oikein, valitse Lähetä. Vasta tämän jälkeen muutokset ovat käytössä ja tieto siirtyy Analyticsiin.

google-tag-manager-live-versio

Lisävaihtoehdot

Mikäli sivustolla on useita erilaisia lomakkeita, voi lomakkeista lisätä GA4-tapahtumaan myös lisäparametrejä, kuten esimerkiksi lomakkeen ID tai lomakkeen sisältöä, jotta näet tarkemmin Analyticsista miten ja mitä lomakkeita kävijät ovat täyttäneet. Parametrien avulla voit siis eritellä lomaketäyttöjä tarkemmin.

Kun katselet CF7 Listener -tagin keräämiä tietoja Tag Managerin esikatselussa, näet mitä kaikkia tietoja lomakkeesta voi saada. Tiedot näkyvät tapahtuman Data Layer -osiossa.

Esimerkiksi:

google-tag-manager-data-layer

Yllä olevasta esimerkistä näet mitä tietoa Tag Manager kerää esimerkkilomakkeestamme. Esim. form ID ja lomakkeen aihe “Palaute”, joka näkyy 1. vastauksessa (index 0). Tällaisia tietoja voidaan siis kerätä Tag Managerilla. Otathan huomioon, että tunnistetietoja, kuten sähköpostiosoitteita ja nimiä ei kuitenkaan saa kerätä Google Analytics 4:ään, koska se rikkoo Googlen sääntöjä. Jos siitä jää kiinni, voi Google sulkea Analytics ja Tag Manager tilinne.

Kerätäksesi lisätietoja lomakkeesta, sinun pitää luoda Tag Manageriin uusi muuttuja, joka kerää jonkin tietyn tiedon lomakkeesta ja auttaa siirtämään sen Google Analyticsiin. Luo uusi Muuttuja, valitse Datakerroksen muuttuja ja lisää Datakerroksen muuttujan nimi. Nimi muodostuu Data Layerillä näkyvistä tiedoista:

  • response.0.value
    • parent key: response
    • 1. vastauksen index nro: 0
    • haluttu tieto: value

Anna Muuttujalle kuvaava nimi ja tallenna.

google-tag-manager-muuttujat

Lisää halutut parametrit GA4 tapahtumatagiin alla olevan esimerkin mukaisesti, jotta ne näkyvät GA4:ssä.

google-tag-managerin-muuttujien-lisääminen-lomakeseuranta-tagiin

Muista aina siirtää muutokset live-versioon Lähetä-nappulan kautta. Lomakeseuranta toimii ja tieto siirtyy Analyticsiin vasta tämän jälkeen.

Jos kaipaat apua sivustosi analytiikan kanssa, ota yhteyttä. Autamme sinua saamaan paremman kuvan sivustosi tapahtumista.

Ota yhteyttä
By

Vastaa