Google Analytics und Hubspot: Conversions mit GA4 erfassen

Hier findet ihr eine Anleitung, um Conversions von HubSpot Formularen in Google Analytics GA4 unter Verwendung des GoogleTagManagers ( ggfs. auch mit ServerSideTracking) zu erfassen. Wir stoßen hier auf ein gängiges Problem:

HubSpot Formulare werden in einem iFrame geladen und der GoogleTagManager kann auf dieser Ebene keine automatische Erfassung der Formularabsendungen machen. Wie wir das umgehen können und trotzdem alle Formular Einsendungen erfassen, zeigen wir euch in fünf Schritten im folgenden Tutorial.

Lesezeit 5 min

1. Datenschichtvariabeln anlegen

Dieser Schritt passiert im GoogleTagManager (nicht der ServerSideManager, falls Ihr ServerSideTracking einsetzt).

Zunächst müssen wir auf drei Datenschichtvariabeln zugreifen können. Dazu legen wir diese unter den Variablen an:

Dieser Schritt ist nicht verpflichtend, doch in unserem Fall möchten wir weiterhin wie in UA-Analytics die Parameter eventCategory, eventAction und eventLabel auch an unsere GA4-Property übergeben.

2. Trigger anlegen

Nun definieren wir einen Trigger, der auf den Ereignisnamen hubspot_form_submission reagiert und ansonsten alle Ergebnisse mit diesem Namen auslöst.

3. Tag anlegen und Trigger zuweisen

Als letzter Konfigurationsschritt legen wir ein Tag vom Tag-Typ "GoogleAnalytics: GA4-Ereignis" an. Dieses Tag das Ereignis dann entsprechend Richtung GA4 oder ServerSideTracking Container weiterleiten, je nach Konfiguration:

4. Auslösen eines Events nach Absenden eines HubSpot Formulares

<script data-hubspot-rendered="true">
       exwe.forms.create({
          region: "eu1",
          portalId: "1337",
          formId: "xyz-123",
          onFormSubmit: function($form) {      
            window.dataLayer.push({
               'event': 'hubspot_form_submission',
               'eventCategory': 'forms',
               'eventAction': 'submit',
               'eventLabel': window.location.pathname}); 
          }
        });
</script>

HubSpot stellt im Rahmen seiner JavaScript Embedd API eine Funktion namens onFormSubmit bereit, welche nach dem Absenden des Formulares ausgelöst wird. Hier klinken wir uns ein um ein paar DataLayerVariablen zu setzen, welche wir dann im TagManager abfangen und an GA4 weiterleiten.

Die DataLayerVariablen 'eventCategory': 'forms','eventAction': 'submit' und 'eventLabel': window.location.pathname sind dabei nicht unbedingt notwendig, erleichtern aber eine weitere Filterung der Absendungen innerhalb von GA4.

5. Events in GA4 als Conversion markieren

Damit ihr die Events die nun Richtung GA4 weitergeleitet werden auch als Conversion einsehen könnt, müsst ihr diese unter Konfigurieren -> Conversions auch noch als solche anlegen. Dies macht ihr über den Button "Neues Conversion Ereignis". Als Ereignis-Namen tragt ihr hier "hubspot_form_submission" ein.

Fertig: Mit diesen Schritten solltet ihr also ohne viele Probleme eingebettete HubSpotFormulare auch innerhalb eurer GA4 Property als Conversion tracken können.