Hubspot is een mooie geïntegreerde marketing en sales oplossing. Het is o.a. een CRM, content management systeem en een marketing tool.

Het meten van conversies is in Hubspot zelf goed geregeld! Je wilt de conversiedata zeer waarschijnlijk ook in andere tools zoals Google Ads of Google Analytics. Dit kun je bereiken met behulp van Google Tag Manager.

Inrichten Google tag Manager

Het inrichten van Google Tag Manager is relatief simpel. Het is een kwestie van de gratis app in de Hubspot market downloaden en het GTM ID invullen. Vanaf dat moment draait GTM op de gehele hubspot site.

Voeg de HTML tag toe in GTM

GTM werkt met datalayers. We willen dat de datalayer gevuld gaat worden met Hubspot data. Hiervoor is een stukje javascript code nodig. Deze ‘luistert’ of er Hubspot formulieren worden verzonden. Zodra dit het geval is dan zal het script de datalayer vullen.

Open GTM en voeg een aangepaste HTML tag toe. Kopieer en plak de onderstaande code in de tag:

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
      window.dataLayer.push({
        'event': 'hubspot-form-success',
        'hs-form-guid': event.data.id,
      });
    }
  });
</script>

JavaScript

Voeg de trigger ‘All Pages’ (of Dom Ready) toe aan de tag en publiceer deze. Je kunt nu gaan controleren of de datalayer gevuld wordt door het script.

In GTM: open de preview modus. Als je dan naar de betreffende website gaat dan zie je de GTM preview balk onderin het scherm. Let wel: dit werkt het beste in Google Chrome.

Vervolgens ga je naar een Hubspot pagina waar een formulier op staat. Vul dit formulier in en verzend deze. Als alles goed is gegaan dan zie je dat er Hubspot data in de datalayer staat:

Ook zie je de Hubspot variablen. In deze tutorial gebruiken wij straks Page path om te identificeren waar vandaan de conversie gekomen is.

Configuratie in Google Tag Manager

Maak nu een trigger in GTM:

Trigger op de naam van de gebeurtenis (event). Dit is de naam die staat aangegeven in het de .html tag die wij hierboven hebben toegevoegd. In ons geval is dat hubspot-form-success maar je kunt ook jouw eigen naam kiezen. Dit moet je uiteraard dan ook even aanpassen in de HTML tag.

Vervolgens gaan we de tags aanmaken. Wij beginnen met Google Analytics:

• Categorie: Dit kun je vrij invullen. In het voorbeeld hebben wij het ‘lead generatie’ genoemd maar je kunt daar ook een eigen conventie voor gebruiken.
• Actie: Ook deze kun je vrij invullen.
• Label: Hieraan kunnen we straks in Google Analytics de forms herkennen. Standaard geeft Hubspot geen formuliernaam mee maar een ID. Hierdoor is het form slecht te herkennen, vandaar dat we de pagina meegeven waar het formulier ingevuld is als Label.

Gebruik voor deze tag de trigger die we zojuist gemaakt hebben.

Voor Google Ads conversiontracking is het vergelijkbaar. Maar een conversie aan in Google Ads en noteer het conversie id en het label:

Controleer of alles werkt

In de GTM preview modus kunnen we nu controleren of de juiste tags gevuurd worden. Ga naar de Hubspot pagina en vul het formulier wederom in. Na het verzenden zie je de tags verschijnen als alles goed gegaan is:

En in Google Analytics:

Mocht je help nodig hebben dan kun je altijd contact met ons opnemen.