En händelse för ett klickat element spårar när en anonym besökare eller HubSpot-kontakt klickar på ett specifikt element på din webbplats. Spåra till exempel när det klickas på en CTA-länk för gratis demo eller en länk för nedladdning av PDF-filer. Händelser för klickade element kan endast skapas och spåras på sidor som har HubSpot-spårningskoden installerad.
Observera:
- Anvisningarna i den här artikeln gäller det nya verktyget för anpassade beteendehändelser, som ersätter det tidigare verktyget för beteendehändelser. Eventuella händelser som skapats i det gamla verktyget kommer att fortsätta att fungera, och du kan fortfarande hantera och analysera dessa händelser i det gamla verktyget.
- Gamla händelser kan inte migreras till det nya verktyget för händelser. Istället rekommenderas det att du återskapar dina gamla händelser i det nya verktyget, eftersom nya anpassade händelser ger mer flexibilitet när det gäller evenemangsegenskaper. Med gamla händelser måste du till exempel skapa flera händelser för att spåra separata kampanjer, men nu kan en enda anpassad beteendehändelse spåra flera kampanjer.
Händelser för klickade element kan skapas på två sätt:
När du har skapat dina händelser kan du lära dig hur du analyserar händelser i analys- och rapporteringsverktygen. Du kan också skapa händelser för besökta URL:er ochanpassade händelser.
Skapa händelser för klickade element med Chrome-tillägget
Installera Chrome-tillägget för händelser
- }
- Navigera till Spårning och analys >Spårningskod i menyn i vänster sidofält.
- Klicka på . Installera event Chrome-tillägget.
- Klicka påLadda ner.
- Du omdirigeras till HubSpot Analytics-tillägget i Google Chrome web store. Klicka påLägg till i Chrome uppe till höger.
- I dialogrutan klickar du påLägg till tillägg.
- När tillägget har installerats visas det som en orange tandhjulsikon tandhjul i verktygsfältet i webbläsaren Chrome.
Skapa ett evenemang med Chrome-tillägget evenemang
- Navigera till en webbsida med din HubSpot-spårningskod installerad.
- Klicka på iverktygsfältet i webbläsaren Chrome. ikon för tandhjul.
- I dialogrutan väljer duklickat element.
- Klicka påNästa. Du kan sedan välja ett element på sidan som ska spåras.
- Klicka på ettelementpå sidan för att skapa en händelse för klickat element. I exemplet nedan kommer händelsen för klickat element att spåra klick på länken för nyckelaspekter.
- I dialogrutan genereras elementetsCSS-selektorautomatiskt. Ange ettnamnför händelsen och klicka sedan på Skapa händelse.
Observera följande: beroende på hur komplex HTML- och CSS-markeringen på din webbplats är kan Chrome-tillägget för händelser inte kunna upptäcka en unik CSS-selektor för ett element. I det här fallet bör du skapa händelsen manuellt eller lägga till en unik id-tag till elementet i stället.
- När händelsen har skapats framgångsrikt visas ett bekräftelsemeddelande. Klicka påVisa händelse i HubSpot för att visa den nya händelsen för det klickade elementet i din instrumentpanel för händelser.
HubSpot börjar sedan spåra elementet. Lär dig hur du analyserar händelsen i HubSpot.
Skapa händelsen manuellt med hjälp av ett ID, en klass eller en jQuery-väljare.
- }
- Klicka på Anpassat beteende Händelser.
- Klicka påSkapa händelse.
- Ange ett namn för händelsen i den högra panelen, och välj sedan klickat element.
- Klicka påNästa.
- Välj hur du vill identifiera det klickade elementet på sidan. Läs mer om hur du hittar identifierare på en webbsida.
- HTML-ID: Ange ID för det element som du vill spåra. Om ditt klickade element till exempel är <button id="log-in">, anger dulog-in.
- HTML Class: Ange klassen för det element som du vill spåra. Om det klickade elementet till exempel är konfigurerat som <button class="bigCTA"> anger du bigCTA.
- jQuery selector: Ange jQuery selector för det element som du vill spåra
.
- Klicka påNästa.
- Som standard kommer det klickade elementet att spåras på alla sidor med HubSpot-spårningskoden installerad. Om du bara vill spåra klick på ett element på en specifik sida väljer du Specifik sida och anger sedan sidans URL.
När du har skapat händelsen börjar HubSpot spåra elementet. Lär dig hur du analyserar händelsen i HubSpot.
Förstå och hämta elementväljare
Du kan identifiera ett element genom dess HTML-ID, HTML-klass eller genom att använda en jQuery-selektor.
ID
Så här hittar och använder du ett elements ID:
- Högerklicka på sidan med elementet du vill använda och väljVisa sidans källaellerInspektera.
- Klicka på elementet. Du bör kunna se ID-attributet i kodraden (t.ex. id="unique-element-name").
- Kopiera ID-värdet och klistra in det (t.ex. i det här fallet, unique-element-name) i HTML ID-fältetutan citattecken. För ett element med
id="get-started-marketing-hub" skulle du till exempel skriva inget-started-marketing-hub i fältet.
Klass
En klickad elementhändelse kan identifiera ett element med hjälp av dess class-attribut.
Observera:
- När flera element på en sida har samma klass räknas endast det första elementet på sidan för att fullborda händelsen. Därför bör du endast använda class som identifierare när inget annat element på sidan har samma klass. Om elementet inte har en unik klass rekommenderas att du använder ID i stället.
- Om du inte kan uppdatera ett elements källkod för att lägga till en unik klass eller ett unikt ID, rekommenderas det att du använder Chrome-tillägget för att ställa in händelsen i stället, eftersom HubSpot kommer att tilldela en mer specifik identifierare.
Så här hittar du ett elements klass och använder den för händelsen:
- Högerklicka på sidan med elementet du vill använda och väljVisa sidans källaellerInspektera.
- Klicka på elementet. Du bör kunna se klassattributet i kodraden (t.ex. class="unique-element-name").
- Kopiera klassvärdet och klistra in det i fältet HTML Class utan citattecken. Till exempel för ett element som innehåller i fältet.
- När ett element har flera klasser kan du använda någon av dess klasser som mål. Om ett element till exempel innehåller
class="cta--primary cta--medium homepage-sales" kan du ange cta--primary, cta--medium eller homepage-sales i fältet HTML Class. Se dock till att inga andra element delar den klassen.
- När flera klasser kopplas samman ska du använda följande format:
class1.class2.class3.
jQuery-väljare
Du kan också använda fullständiga jQuery-väljare för att rikta in dig på element. Detta är användbart om elementet du riktar dig till inte har något ID eller någon klass, eller om du behöver vara mer specifik.
Du vill till exempel skapa en klickad elementhändelse med hjälp av en jQuery-väljare för följande element:
<a id="get-started-marketing-hub" class="cta--primary" href="https://www.hubspot.com/products/marketing/get-started" aria-label="Kom igång med Marketing Hub">Kom igång</a>
I stället för att använda elementets ID eller klass kan du använda en jQuery-selektor för att rikta in dig på elementets href-egenskap genom att skriva in följande i fältet förjQuery-selektor:
[href='https://www.hubspot.com/products/marketing/get-started']
Läs mer omvalörer som stöds.