Klik op Analytics Auto-collection plugin for Application Insights JavaScript SDK

Deze invoegfunctie houdt automatisch klikgebeurtenissen op webpagina's bij en gebruikt gegevens-*-kenmerken in HTML-elementen om telemetriegegevens van gebeurtenissen te vullen.

Aan de slag

Gebruikers kunnen de invoegvoeging Click Analytics Auto-collection instellen via npm.

NPM-installatie

NPM-pakket installeren:

npm install --save @microsoft/applicationinsights-clickanalytics-js @microsoft/applicationinsights-web

import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ClickAnalyticsPlugin } from '@microsoft/applicationinsights-clickanalytics-js';

const clickPluginInstance = new ClickAnalyticsPlugin();
// Click Analytics configuration
const clickPluginConfig = {
  autoCapture: true
};
// Application Insights Configuration
const configObj = {
  instrumentationKey: "YOUR INSTRUMENTATION KEY",
  extensions: [clickPluginInstance],
  extensionConfig: {
    [clickPluginInstance.identifier]: clickPluginConfig
  },
};

const appInsights = new ApplicationInsights({ config: configObj });
appInsights.loadAppInsights();

Installatie van fragment (negeren als u NPM-installatie gebruikt)

<script type="text/javascript" src="https://js.monitor.azure.com/scripts/b/ext/ai.clck.2.6.2.min.js"></script>
<script type="text/javascript">
  var clickPluginInstance = new Microsoft.ApplicationInsights.ClickAnalyticsPlugin();
  // Click Analytics configuration
  var clickPluginConfig = {
    autoCapture : true,
    dataTags: {
      useDefaultContentNameOrId: true
    }
  }
  // Application Insights Configuration
  var configObj = {
    instrumentationKey: "YOUR INSTRUMENTATION KEY",
    extensions: [
      clickPluginInstance
    ],
    extensionConfig: {
      [clickPluginInstance.identifier] : clickPluginConfig
    },
  };
  // Application Insights Snippet code
  !function(T,l,y){<!-- Removed the Snippet code for brevity -->}(window,document,{
    src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js",
    crossOrigin: "anonymous",
    cfg: configObj
  });
</script>

De invoeg-app effectief gebruiken

  1. Telemetriegegevens die worden gegenereerd op basis van de klikgebeurtenissen, worden opgeslagen zoals in de sectie customEvents Application Insights van de Azure Portal.

  2. De name van de customEvent wordt ingevuld op basis van de volgende regels:

    1. De id in de wordt gebruikt als de naam data-*-id customEvent. Als het geklikte HTML-element bijvoorbeeld het kenmerk 'data-sample-id'='button1' heeft, wordt 'button1' de naam van de customEvent.
    2. Als een dergelijk kenmerk niet bestaat en als de is ingesteld op in de configuratie, wordt het HTML-kenmerk of de naam van de inhoud van het element van het geklikte element gebruikt als de useDefaultContentNameOrId true naam id customEvent. Als zowel id als de naam van de inhoud aanwezig is, wordt prioriteit gegeven aan id .
    3. Als useDefaultContentNameOrId onwaar is, wordt de naam van customEvent 'not_specified'.

    Tip

    Onze aanbevelingen zijn om in te useDefaultContentNameOrId stellen op true voor het genereren van zinvolle gegevens.

  3. parentDataTag doet twee dingen:

    1. Als deze tag aanwezig is, worden de kenmerken en waarden opgehaald uit alle bovenliggende data-* HTML-elementen van het geklikte element.
    2. Om de efficiƫntie te verbeteren, gebruikt de invoeggebruiker deze tag als een vlag. Wanneer deze wordt aangetroffen, wordt het DOM (Document Object Model) niet meer verder verwerkt.

    Waarschuwing

    Zodra is gebruikt, zoekt de SDK naar bovenliggende tags in de hele toepassing en niet alleen naar het HTML-element waar u deze parentDataTag hebt gebruikt.

  4. customDataPrefix Als het goed is, moet de gebruiker altijd beginnen data- met , bijvoorbeeld data-sample- . In HTML vormen de globale kenmerken een klasse kenmerken die aangepaste gegevenskenmerken worden genoemd, waarmee eigendomsinformatie kan worden uitgewisseld tussen de HTML en de DOM-weergave door data-* scripts. Oudere browsers (Internet Explorer Safari) laten kenmerken vallen die niet worden begrepen, tenzij ze beginnen met data- .

    De * in kan worden vervangen door een naam die volgt op de data-* productieregel van XML-namen met de volgende beperkingen:

    • De naam mag niet beginnen met 'xml', ongeacht de case die wordt gebruikt voor deze letters.
    • De naam mag geen puntkomma's (U+003A) bevatten.
    • De naam mag geen hoofdletters bevatten.

Welke gegevens worden door de invoegingsinvoeging verzameld?

Hier volgen enkele van de belangrijkste eigenschappen die standaard worden vastgelegd wanneer de invoegvoegcode is ingeschakeld:

Aangepaste gebeurteniseigenschappen

Naam Beschrijving Voorbeeld
naam De name van de customEvent. Meer informatie over hoe dit wordt ingevuld, vindt u hier. Over
itemType Type gebeurtenis. customEvent
sdkVersion versie van Application Insights SDK samen met klik-invoegtoepassing javascript:2.6.2_ClickPlugin2.6.2

Aangepaste dimensies

Naam Beschrijving Voorbeeld
actionType Actietype dat de klikgebeurtenis heeft veroorzaakt. U kunt met de linker muisklik of met de rechtermuisknop klikken. CL
baseTypeSource Basistypebron van de aangepaste gebeurtenis. Klik opEvent
clickCoordinates Coƶrdinaten waar de klikgebeurtenis wordt geactiveerd. 659X47
inhoud Tijdelijke aanduiding voor het opslaan data-* van aanvullende kenmerken en waarden. [{sample1:value1, sample2:value2}]
pageName Titel van de pagina waarop de klikgebeurtenis wordt geactiveerd. Voorbeeldtitel
parentId Id of naam van het bovenliggende element navbarContainer

Aangepaste metingen

Naam Beschrijving Voorbeeld
timeToAction De tijd die nodig is in desecs voor de gebruiker om op het element te klikken sinds de eerste pagina is geladen 87407

Configuratie

Naam Type Standaard Beschrijving
autoCapture booleaans true Configuratie van automatisch vastleggen.
Callback IValueCallback null Configuratie van callbacks.
pageTags tekenreeks null Paginatags.
dataTags ICustomDataTags null Aangepaste gegevenstags die zijn opgegeven voor het overschrijven van standaardtags die worden gebruikt om klikgegevens vast te leggen.
urlCollectHash booleaans onjuist Hiermee schakelt u de logboekregistratie van waarden in na een #-teken van de URL.
urlCollectQuery booleaans onjuist Hiermee schakelt u de logboekregistratie van de queryreeks van de URL in.
behaviorValidator Functie null De callback-functie die moet worden gebruikt voor de data-*-bhvr waardevalidatie. Ga voor meer informatie naar de sectie behaviorValidator.
defaultRightClickBhvr tekenreeksnummer (of) '' Standaardgedragswaarde wanneer de gebeurtenis Met de rechtermuisknop is opgetreden. Deze waarde wordt overschrijven als het element het kenmerk data-*-bhvr heeft.
dropInvalidEvents booleaans onjuist Vlag voor het verwijderen van gebeurtenissen die geen nuttige klikgegevens hebben.

IValueCallback

Naam Type Standaard Beschrijving
pageName Functie null Functie om het standaardgedrag voor het vastleggen van pageName te overschrijven.
pageActionPageTags Functie null Een callback-functie voor het verbeteren van de standaard pageTags die zijn verzameld tijdens de pageAction-gebeurtenis.
contentName Functie null Een callback-functie om aangepaste contentName in te vullen.

ICustomDataTags

Naam Type Standaard Standaardtag die moet worden gebruikt in HTML Description
useDefaultContentNameOrId booleaans onjuist N.v.t. Verzamelt het standaard HTML-kenmerk voor contentName wanneer een bepaald element niet is getagd met de standaardwaarde customDataPrefix of wanneer customDataPrefix niet wordt opgegeven door de gebruiker.
customDataPrefix tekenreeks data- data-* Automatisch vastleggen van inhoudsnaam en waarde van elementen die zijn gelabeld met opgegeven voorvoegsel. Bijvoorbeeld, data-*-id , data-<yourcustomattribute> kan worden gebruikt in de HTML-tags.
aiBlobAttributeTag tekenreeks ai-blob data-ai-blob De invoeg-app ondersteunt een JSON-blobkenmerk in plaats van data-* afzonderlijke kenmerken.
metaDataPrefix tekenreeks null N.v.t. De meta-elementnaam en -inhoud van HTML Head automatisch vastleggen met het opgegeven voorvoegsel bij het vastleggen. Kan bijvoorbeeld custom- worden gebruikt in de HTML-metatag.
captureAllMetaDataContent booleaans onjuist N.v.t. Leg automatisch alle meta-elementnamen en -inhoud van HTML Head vast. De standaardinstelling is onwaar. Als deze functie is ingeschakeld, wordt de opgegeven metaDataPrefix overschrijven.
parentDataTag tekenreeks null N.v.t. Stopt met het doorlopen van de DOM om de naam en waarde van de inhoud van elementen vast te leggen wanneer deze tag wordt aangetroffen. Kan bijvoorbeeld data-<yourparentDataTag> worden gebruikt in de HTML-tags.
dntDataTag tekenreeks ai-dnt data-ai-dnt HTML-elementen met dit kenmerk worden genegeerd door de invoegsel voor het vastleggen van telemetriegegevens.

behaviorValidator

Met de behaviorValidator-functies wordt automatisch gecontroleerd of getagd gedrag in code voldoet aan een vooraf gedefinieerde lijst. Dit zorgt ervoor dat getagd gedrag consistent is met de vastgestelde taxonomie van uw onderneming. Het is niet vereist of verwacht dat de meeste Azure Monitor deze gebruiken, maar het is beschikbaar voor geavanceerde scenario's. Er zijn drie verschillende behaviorValidator-callback-functies die worden gebruikt als onderdeel van deze extensie. Gebruikers kunnen echter hun eigen callback-functies gebruiken als de belichte functies niet aan uw vereisten voldoen. Het doel is om uw eigen gedragsgegevensstructuur te gebruiken. De invoegsel gebruikt deze validatorfunctie tijdens het extraheren van het gedrag van de gegevenstags.

Naam Beschrijving
BehaviorValueValidator Gebruik deze callback-functie als de gegevensstructuur van uw gedrag een matrix met tekenreeksen is.
BehaviorMapValidator Gebruik deze callback-functie als de gegevensstructuur van uw gedrag een woordenlijst is.
BehaviorEnumValidator Gebruik deze callback-functie als de gegevensstructuur van uw gedrag een enum is.

Voorbeeldgebruik met behaviorValidator

var clickPlugin = Microsoft.ApplicationInsights.ClickAnalyticsPlugin;
var clickPluginInstance = new clickPlugin();

// Behavior enum values
var behaviorMap = {
  UNDEFINED: 0, // default, Undefined

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Page Experience [1-19]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  NAVIGATIONBACK: 1, // Advancing to the previous index position within a webpage
  NAVIGATION: 2, // Advancing to a specific index position within a webpage
  NAVIGATIONFORWARD: 3, // Advancing to the next index position within a webpage
  APPLY: 4, // Applying filter(s) or making selections
  REMOVE: 5, // Applying filter(s) or removing selections
  SORT: 6, // Sorting content
  EXPAND: 7, // Expanding content or content container
  REDUCE: 8, // Sorting content
  CONTEXTMENU: 9, // Context Menu
  TAB: 10, // Tab control
  COPY: 11, // Copy the contents of a page
  EXPERIMENTATION: 12, // Used to identify a third party experimentation event
  PRINT: 13, // User printed page
  SHOW: 14, //  Displaying an overlay
  HIDE: 15, //  Hiding an overlay
  MAXIMIZE: 16, //  Maximizing an overlay
  MINIMIZE: 17, // Minimizing an overlay
  BACKBUTTON: 18, //  Clicking the back button

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Scenario Process [20-39]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  STARTPROCESS: 20, // Initiate a web process unique to adopter
  PROCESSCHECKPOINT: 21, // Represents a checkpoint in a web process unique to adopter
  COMPLETEPROCESS: 22, // Page Actions that complete a web process unique to adopter
  SCENARIOCANCEL: 23, // Actions resulting from cancelling a process/scenario

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Download [40-59]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  DOWNLOADCOMMIT: 40, // Initiating an unmeasurable off-network download
  DOWNLOAD: 41, // Initiating a download

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Search [60-79]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  SEARCHAUTOCOMPLETE: 60, // Auto-completing a search query during user input
  SEARCH: 61, // Submitting a search query
  SEARCHINITIATE: 62, // Initiating a search query
  TEXTBOXINPUT: 63, // Typing or entering text in the text box

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Commerce [80-99]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  VIEWCART: 82, // Viewing the cart
  ADDWISHLIST: 83, // Adding a physical or digital good or services to a wishlist
  FINDSTORE: 84, // Finding a physical store
  CHECKOUT: 85, // Before you fill in credit card info
  REMOVEFROMCART: 86, // Remove an item from the cart
  PURCHASECOMPLETE: 87, // Used to track the pageView event that happens when the CongratsPage or Thank You page loads after a successful purchase
  VIEWCHECKOUTPAGE: 88, // View the checkout page
  VIEWCARTPAGE: 89, // View the cart page
  VIEWPDP: 90, // View a PDP
  UPDATEITEMQUANTITY: 91, // Update an item's quantity
  INTENTTOBUY: 92, // User has the intent to buy an item
  PUSHTOINSTALL: 93, // User has selected the push to install option

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Authentication [100-119]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  SIGNIN: 100, // User sign-in
  SIGNOUT: 101, // User sign-out

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Social [120-139]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  SOCIALSHARE: 120, // "Sharing" content for a specific social channel
  SOCIALLIKE: 121, // "Liking" content for a specific social channel
  SOCIALREPLY: 122, // "Replying" content for a specific social channel
  CALL: 123, // Click on a "call" link
  EMAIL: 124, // Click on an "email" link
  COMMUNITY: 125, // Click on a "community" link

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Feedback [140-159]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  VOTE: 140, // Rating content or voting for content
  SURVEYCHECKPOINT: 145, // reaching the survey page/form

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Registration, Contact [160-179]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  REGISTRATIONINITIATE: 161, // Initiating a registration process
  REGISTRATIONCOMPLETE: 162, // Completing a registration process
  CANCELSUBSCRIPTION: 163, // Canceling a subscription
  RENEWSUBSCRIPTION: 164, // Renewing a subscription
  CHANGESUBSCRIPTION: 165, // Changing a subscription
  REGISTRATIONCHECKPOINT: 166, // Reaching the registration page/form

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Chat [180-199]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  CHATINITIATE: 180, // Initiating a chat experience
  CHATEND: 181, // Ending a chat experience

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Trial [200-209]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  TRIALSIGNUP: 200, // Signing-up for a trial
  TRIALINITIATE: 201, // Initiating a trial

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Signup [210-219]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  SIGNUP: 210, // Signing-up for a notification or service
  FREESIGNUP: 211, // Signing-up for a free service

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Referals [220-229]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  PARTNERREFERRAL: 220, // Navigating to a partner's web property

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Intents [230-239]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  LEARNLOWFUNNEL: 230, // Engaging in learning behavior on a commerce page (ex. "Learn more click")
  LEARNHIGHFUNNEL: 231, // Engaging in learning behavior on a non-commerce page (ex. "Learn more click")
  SHOPPINGINTENT: 232, // Shopping behavior prior to landing on a commerce page

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Video [240-259]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  VIDEOSTART: 240, // Initiating a video
  VIDEOPAUSE: 241, // Pausing a video
  VIDEOCONTINUE: 242, // Pausing or resuming a video.
  VIDEOCHECKPOINT: 243, // Capturing predetermined video percentage complete.
  VIDEOJUMP: 244, // Jumping to a new video location.
  VIDEOCOMPLETE: 245, // Completing a video (or % proxy)
  VIDEOBUFFERING: 246, // Capturing a video buffer event
  VIDEOERROR: 247, // Capturing a video error
  VIDEOMUTE: 248, // Muting a video
  VIDEOUNMUTE: 249, // Unmuting a video
  VIDEOFULLSCREEN: 250, // Making a video full screen
  VIDEOUNFULLSCREEN: 251, // Making a video return from full screen to original size
  VIDEOREPLAY: 252, // Making a video replay
  VIDEOPLAYERLOAD: 253, // Loading the video player
  VIDEOPLAYERCLICK: 254, //  Click on a button within the interactive player
  VIDEOVOLUMECONTROL: 255, //  Click on video volume control
  VIDEOAUDIOTRACKCONTROL: 256, // Click on audio control within a video
  VIDEOCLOSEDCAPTIONCONTROL: 257, //  Click on the closed caption control
  VIDEOCLOSEDCAPTIONSTYLE: 258, //  Click to change closed caption style
  VIDEORESOLUTIONCONTROL: 259, //  Click to change resolution

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  //    Advertisement Engagement [280-299]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  ADBUFFERING: 283, // Ad is buffering
  ADERROR: 284, // Ad error
  ADSTART: 285, // Ad start
  ADCOMPLETE: 286, // Ad complete
  ADSKIP: 287, // Ad skipped
  ADTIMEOUT: 288, // Ad timed-out
  OTHER: 300 // Other
};

// Application Insights Configuration
var configObj = {
  instrumentationKey: "YOUR INSTRUMENTATION KEY",
  extensions: [clickPluginInstance],
  extensionConfig: {
    [clickPluginInstance.identifier]: {
      behaviorValidator: Microsoft.ApplicationInsights.BehaviorMapValidator(behaviorMap),
      defaultRightClickBhvr: 9
    },
  },
};
var appInsights = new Microsoft.ApplicationInsights.ApplicationInsights({
  config: configObj
});
appInsights.loadAppInsights();

Voorbeeldapp

Eenvoudige web-app met Click Analytics Auto-collection Plugin ingeschakeld.

Volgende stappen