Laatst bijgewerkt: januari 20, 2023
Met aangepaste gedragsevents kun je informatie bijhouden die uniek is voor jouw bedrijf. Clicked element en visited URL events kunnen zonder code gemaakt worden met de HubSpot Chrome extensie.
Een clicked element event houdt bij wanneer een anonieme bezoeker of HubSpot-contact op een specifiek element op je website klikt. Volg bijvoorbeeld wanneer een gratis demo CTA of PDF download link wordt aangeklikt. Clicked element events kunnen alleen worden gemaakt en gevolgd op pagina's die de HubSpot tracking code geïnstalleerd. Visited URL events registreren wanneer een anonieme bezoeker of HubSpot contactpersoon een specifieke URL op je website bezoekt.
Let op:
- De instructies in dit artikel zijn voor de nieuwe tool voor aangepaste gedragsevenementen, die de vorige tool voor gedragsevenementen vervangt. Alle gebeurtenissen die in de oude tool zijn gemaakt, blijven werken en je kunt die gebeurtenissen nog steeds beheren en analyseren in de oude tool.
- Oude gebeurtenissen kunnen niet worden gemigreerd naar de nieuwe gebeurtenistool. In plaats daarvan is het aanbevolen om je oude events opnieuw aan te maken in de nieuwe tool, omdat de nieuwe aangepaste events meer flexibiliteit bieden met event-eigenschappen. Met oude events moest u bijvoorbeeld meerdere events aanmaken om afzonderlijke campagnes te volgen, maar nu kan één enkele aangepaste gedragsevent meerdere campagnes volgen.
Bezochte URL en Geklikt element events kunnen worden gemaakt door de HubSpot Chrome-extensie te installeren en te gebruiken voor eenvoudige geklikte events, zoals hyperlinks en afbeeldingen.
Als je eenmaal je gebeurtenissen hebt aangemaakt, leer dan hoe je . gebeurtenissen analyseren in de analyse- en rapportagetools. Je kunt ook handmatig getrackte aangepaste gebeurtenissen.
Gebeurtenissen maken met de Chrome-extensie
Installeer de gebeurtenis Chrome-extensie
- Klik in uw HubSpot-account op de instellingenpictogram in de hoofdnavigatiebalk.
- Navigeer in het linker zijbalkmenu naar Tracking & analytics > Tracking Code.
-
Klik op Installeer evenement chrome extensie.
-
Klik op Downloaden.
- Je wordt doorgestuurd naar de HubSpot Analytics-extensie in de Google Chrome-webwinkel. Klik rechtsboven op Toevoegen aan Chrome.
- Klik in het dialoogvenster op Extensie toevoegen.
- Zodra de extensie is geïnstalleerd, verschijnt deze als een oranje in de werkbalk van je Chrome-browser.
Een bezochte URL-event maken met de event Chrome-extensie
- Navigeer naar een webpagina met uw HubSpot-trackingcode geïnstalleerd.
- Klik in de werkbalk van je Chrome-browser op het tandwielpictogram.
- Selecteer in het dialoogvenster Bezochte URL en klik op Volgende.
- Voeg je evenementnaam en optioneel een beschrijving toe. Klik op Volgende.
- Klik op Toevoegen om een pagina toe te voegen. Je kunt meerdere pagina's aan één evenement toevoegen.
- Voer in het veld Pagina-URL de URL in waaraan u bezoeken wilt koppelen.
- Voer in het veld Naam een naam in voor de pagina. Deze naam is beschikbaar in de evenementeigenschappen onder de eigenschap Traceringsnaam.
- Klik op Gebeurtenis maken.
HubSpot begint de gebeurtenis dan te volgen. Leer hoe u De gebeurtenis in HubSpot analyseren.
Maak een geklikt element-event met de event Chrome-extensie
- Navigeer naar een webpagina waarop uw HubSpot-trackingcode geïnstalleerd.
- Klik in de Chrome-browserwerkbalk op het tandwielpictogram.
- Selecteer in het dialoogvenster Clicked element.
- Klik op Volgende.
- Voeg je evenementnaam toe en voeg optioneel een beschrijving toe. Klik op Volgende.
- Klik op Toevoegen om een element op de pagina te selecteren om te volgen . Selecteer een element op de pagina om te volgen. U kunt meerdere aangeklikte elementen aan één gebeurtenis toevoegen.
- Klik op een element op de pagina om een gebeurtenis voor een geklikt element aan te maken. In het onderstaande voorbeeld zal de gebeurtenis voor geklikt element klikken op de link met de belangrijkste aspecten volgen.
- In het dialoogvenster wordt de CSS-selector van het element automatisch gegenereerd. Voer een naam in voor het element dat je volgt. Deze naam zal beschikbaar zijn in de eigenschapgegevens van de gebeurtenis onder de eigenschap Volgnaam. Voeg optioneel een beschrijving toe en klik op Volgende.
- Om bijkomende elementen aan uw gebeurtenis toe te voegen, klikt u op Toevoegen en selecteert u een ander element.
- Om te eindigen en uw gebeurtenis op te slaan, klikt u op Gebeurtenis maken.
Opmerking: afhankelijk van de complexiteit van de HTML- en CSS-opmaak van uw site, kan de gebeurtenis Chrome-extensie mogelijk geen unieke CSS-selector voor een element detecteren. In dat geval moet u de selector wijzigen. Meer informatie over het vinden van identifiers op een websitepagina.
- Nadat het evenement met succes is gemaakt, verschijnt er een bevestigingsbericht. Klik op Bekijk gebeurtenis in HubSpot om de nieuwe geklikte elementgebeurtenis in je evenementendashboard te bekijken.
HubSpot zal dan beginnen met het volgen van de element(en). Leer hoe Analyseer de gebeurtenis in HubSpot.
Element selectors begrijpen en ophalen
Je kunt een element identificeren door zijn HTML ID, HTML class, of door een jQuery selector te gebruiken.
- HTML-ID: voer de ID van het element dat u wilt volgen. Bijvoorbeeld, als uw geklikt element is ingesteld op <button id="log-in">, zou u log-in invoeren.
- HTML klasse: voer de klasse van het element dat u wilt volgen. Bijvoorbeeld, als uw aangeklikte element is ingesteld als <button class="bigCTA">, voert u bigCTA in.
- jQuery selector: voer de jQuery selector van het element dat je wilt volgen.
ID
Om de ID van een element te vinden en te gebruiken:
- Klik met de rechtermuisknop op de pagina met het gewenste element en selecteer Paginabron weergeven of Inspecteren.
- Klik op het element. Je zou het ID-attribuut moeten kunnen zien in de regel code (bijv. id="unique-element-name").
- Kopieer de ID-waarde en plak die (bijvoorbeeld, in dit geval, unique-element-name) in het HTML ID-veld zonder de aanhalingstekens. Bijvoorbeeld, voor een element met id="get-started-marketing-hub", vul je get-started-marketing-hub in het veld in.
Klasse
Een geklikt element gebeurtenis kan een element identificeren door zijn klasse attribuut.
Let op:
- wanneer meerdere elementen op een pagina dezelfde klasse delen, telt alleen het eerste element op de pagina mee voor het voltooien van gebeurtenissen. Daarom moet je class alleen gebruiken als identifier als geen enkel ander element op de pagina die class deelt. Als het element geen unieke klasse heeft, is het aan te raden om in plaats daarvan ID te gebruiken.
- Als je de broncode van een element niet kunt bijwerken om een unieke klasse of ID toe te voegen, is het aan te raden om in plaats daarvan de Chrome-extensie te gebruiken om het evenement in te stellen, omdat HubSpot een specifiekere identificatiecode zal toewijzen.
Om de klasse van een element te vinden en deze te gebruiken voor de gebeurtenis:
- Klik met de rechtermuisknop op de pagina met het element waarop je je richt en selecteer Paginabron weergeven of Inspecteren.
- Klik op het element. Je zou het class attribuut moeten kunnen zien in de regel code (bijv. class="unique-element-name").
- Kopieer de class-waarde en plak die zonder aanhalingstekens in het HTML Class-veld. Bijvoorbeeld voor een element dat in het veld is opgenomen.
- Wanneer een element meerdere klassen heeft, kun je elk van de klassen gebruiken als doel. Als een element bijvoorbeeld class="cta--primary cta--medium homepage-sales" bevat, kun je cta--primary, cta--medium, of homepage-sales in het HTML Klasse veld invoeren. Zorg er echter voor dat geen andere elementen die klasse delen.
- Als u meerdere klassen samenvoegt, gebruik dan het volgende formaat: class1.class2.class3.
jQuery selector
Je kunt ook volledige jQuery selectors gebruiken om elementen te targeten. Dit is handig als het element dat je zoekt geen ID of klasse heeft, of als je specifieker moet zijn.
Bijvoorbeeld, je wilt een clicked element event maken met een jQuery selector voor het volgende element:
<a id="get-started-marketing-hub" class="cta--primary" href="https://www.hubspot.com/products/marketing/get-started" aria-label="Aan de slag met Marketing Hub">Start</a>.
In plaats van de ID of klasse van het element te gebruiken, zou je een jQuery selector kunnen gebruiken om de href eigenschap van het element te targeten door het volgende in te voeren in het jQuery selector veld:
[href='https://www.hubspot.com/products/marketing/get-started']
Meer informatie over ondersteunde selectors.
