Kattintson az Analytics auto-collection beépülő modul az Application Elemzések JavaScript SDK-hoz elemre

Ez a beépülő modul automatikusan nyomon követi a weblapok kattintási eseményeit, és a HTML-elemek data-* attribútumait használja az esemény-telemetria feltöltéséhez.

Első lépések

A felhasználók az npm-en keresztül állíthatják be a Click Analytics automatikus gyűjtési beépülő modulját.

NPM beállítása

Telepítse az npm-csomagot:

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();

Kódrészlet telepítése (figyelmen kívül hagyás az NPM-telepítő használata esetén)

<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>

A beépülő modul hatékony használata

  1. A kattintási eseményekből létrehozott telemetriai adatokat a rendszer az alkalmazás Elemzések customEvents szakaszában Azure Portal.

  2. A customEvent adatokat a rendszer a name következő szabályok alapján tölti fel:

    1. A id rendszer a data-*-id fájlban megadott nevet használja a customEvent névként. Ha például a kattintott HTML-elem attribútuma "data-sample-id"="button1", akkor a "button1" lesz a customEvent neve.
    2. Ha nem létezik ilyen attribútum, és a konfigurációban a értéke , akkor a rendszer a kattintott elem HTML-attribútumát vagy az elem tartalomnevét használja useDefaultContentNameOrId true id customEvent névként. Ha a id és a tartalomnév is meg van adva, a elsőbbséget élvez a id számára.
    3. Ha useDefaultContentNameOrId a false (hamis) érték, akkor a customEvent neve "not_specified".

    Tipp

    A javaslatunk szerint állítsa true useDefaultContentNameOrId (igaz) értékre a jelentéssel bíró adatok létrehozásához.

  3. parentDataTag két dolgot tesz:

    1. Ha ez a címke jelen van, a beépülő modul a kattintott elem összes szülő HTML-elemének attribútumát és értékét data-* lekéri.
    2. A hatékonyság növelése érdekében a beépülő modul ezt a címkét használja jelzőként, ha találkozik, nem fogja tudni felfelé feldolgozni a DOM-et (Document Object Model).

    Figyelemfelhívás

    A használata után az SDK a teljes alkalmazásban keresni kezdi a szülőcímkéket, és nem csak azt a HTML-elemet, parentDataTag ahol használta.

  4. customDataPrefix A felhasználó által biztosított adatoknak mindig a kezdetsel kell data- kezdődni, data-sample- például: . A HTML-ben a globális attribútumok olyan attribútumosztályt alkotnak, amelyet egyéni adatattribútumoknak nevezünk, amelyek lehetővé teszik, hogy jogvédett adatokat cseréljenek a HTML és a data-* DOM-ábrázolás között parancsfájlokkal. A régebbi böngészők (Internet Explorer Safari) eldobják a számára nem érthető attribútumokat, kivéve, ha a data- kezdetük.

    A fájlban bármilyen név lecserélhető az XML-nevekre vonatkozó éles szabályt * data-* követő nevekre a következő korlátozásokkal:

    • A névnek nem szabad "xml" betűvel kezdődnie, függetlenül a betűktől.
    • A név nem tartalmazhat pontosvesszőt (U+003A).
    • A név nem tartalmazhat nagybetűket.

Milyen adatokat gyűjt a beépülő modul?

A beépülő modul engedélyezésekor az alábbi fő tulajdonságokat rögzíti alapértelmezés szerint:

Egyéni esemény tulajdonságai

Név Leírás Sample
name A name customEvent entitáshoz. A feltöltés mikéntjéhez itt látható további információ. Névjegy
Itemtype Az esemény típusa. customEvent (egyénivent)
sdkVersion az Application Elemzések SDK verziója és a kattintási beépülő modul javascript:2.6.2_ClickPlugin2.6.2

Egyéni dimenziók

Név Leírás Sample
actionType (művelettípus) A kattintási eseményt okozó művelettípus. Kattinthat bal gombbal vagy jobb gombbal. CL
baseTypeSource Az egyéni esemény alaptípusa. Kattintson azVent (Vent) elemre.
clickCoordinates (Sorszámok) Koordináták, ahol a kattintási esemény aktiválódik. 659X47
tartalom Helyőrző további data-* attribútumok és értékek tárolására. [{sample1:value1, sample2:value2}]
pageName Annak az oldalnak a címe, ahol a kattintási esemény aktiválódik. Mintacím
parentId (szülőazonosító) A szülőelem azonosítója vagy neve navbarContainer

Egyéni mérések

Név Leírás Sample
timeToAction Ezredmásodpercben megtöltve, hogy a felhasználó a kezdeti oldalbetöltés óta kattintson az elemre 87407

Konfiguráció

Név Típus Alapértelmezett Description
autoCapture boolean true Automatikus rögzítési konfiguráció.
Visszahívási IValueCallback null Visszahívási konfiguráció.
pageTags (oldalcímkék) sztring null Oldalcímkék.
dataTagek ICustomDataTags (ICustomDataTags) null A kattintási adatok rögzítéséhez használt alapértelmezett címkék felülbírálása érdekében megadott egyéni adatcímkék.
urlCollectHash boolean hamis Engedélyezi az értékek naplózását az URL-cím "#" karaktere után.
urlCollectQuery boolean hamis Engedélyezi az URL-cím lekérdezési sztringjének naplózását.
behaviorValidator Függvény null Az értékérvényesítéshez használt data-*-bhvr visszahívási függvény. További információért lásd: behaviorValidator szakasz.
defaultRightClickBhvr sztring (vagy) száma '' Alapértelmezett viselkedési érték, ha a jobb kattintás esemény történt. Ez az érték felül lesz bírálva, ha az elem data-*-bhvr attribútummal rendelkezik.
dropInvalidEvents (dropInvalidEvents) boolean hamis A jelölővel eldobhat olyan eseményeket, amelyek nem tartalmaznak hasznos kattintási adatokat.

IValueCallback

Név Típus Alapértelmezett Leírás
pageName Függvény null Az alapértelmezett pageName rögzítési viselkedést felülbíráló függvény.
pageActionPageTags Függvény null Visszahívási függvény a pageAction esemény során gyűjtött alapértelmezett pageTagek bővítéséhez.
contentName (tartalomnév) Függvény null Egy visszahívási függvény a testreszabott contentName adatokkal való feltöltéséhez.

ICustomDataTags (ICustomDataTags)

Név Típus Alapértelmezett Html-ben használt alapértelmezett címke Description
useDefaultContentNameOrId boolean hamis N/A A contentName fájl szabványos HTML-attribútumát gyűjti, ha egy adott elem nincs megcímkézve az alapértelmezett customDataPrefix címkével, vagy ha a felhasználó nem a customDataPrefix paramétert biztosítja.
customDataPrefix sztring data- data-* A megadott előtaggal címkézett elemek tartalomnevének és értékének automatikus rögzítése. A data-*-id data-<yourcustomattribute> HTML-címkékben például a használható.
aiBlobAttributeTag sztring ai-blob data-ai-blob A beépülő modul különálló attribútumok helyett JSON data-* blobattribútumokat támogat.
metaDataPrefix sztring null N/A Automatikus rögzítés HTML Head metaelemének neve és tartalma a rögzítéskor megadott előtaggal. A használható custom- például a HTML-metacímkében.
captureAllMetaDataContent boolean hamis N/A A HTML Head metaelemnevének és tartalmának automatikus rögzítése. Az alapértelmezett érték a false (hamis). Ha engedélyezve van, ez felülírja a megadott metaDataPrefix előtagot.
parentDataTag sztring null N/A Leállítja a DOM bejárása a tartalom nevének és értékének rögzítéséhez, ha ezzel a címkével találkozik. A használható data-<yourparentDataTag> például a HTML-címkékben.
dntDataTag sztring ai-dnt data-ai-dnt Az ezzel az attribútummal kapcsolatos HTML-elemeket a beépülő modul figyelmen kívül hagyja a telemetriai adatok rögzítéséhez.

behaviorValidator

A behaviorValidator függvény automatikusan ellenőrzi, hogy a címkézett viselkedések a kódban megfelelnek-e egy előre meghatározott listának. Ez biztosítja, hogy a címkézett viselkedések konzisztensek legyenek a vállalat által létrehozott taxonómiával. Ez nem kötelező vagy elvárás, Azure Monitor legtöbb ügyfél ezt fogja használni, de speciális forgatókönyvekhez is elérhető. A bővítmény részeként három különböző behaviorValidator visszahívási függvény van elérhetővé téve. A felhasználók azonban saját visszahívási függvényeket is használhatnak, ha a felfedett függvények nem oldják meg az Ön követelményeit. A cél a saját viselkedésű adatstruktúra használata. A beépülő modul ezt a validator függvényt használja, miközben kinyeri a viselkedéseket az adatcímkékből.

Név Leírás
BehaviorValueValidator Akkor használja ezt a visszahívási függvényt, ha a viselkedés adatstruktúrája sztringek tömbje.
BehaviorMapValidator Akkor használja ezt a visszahívási függvényt, ha a viselkedés adatstruktúrája egy szótár.
BehaviorEnumValidator Akkor használja ezt a visszahívási függvényt, ha a viselkedés adatstruktúrája felsorolás.

Mintahasználat behaviorValidator értékekkel

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();

Mintaalkalmazás

Egyszerű webalkalmazás a Click Analytics automatikus gyűjtési beépülő modullal engedélyezve.

Következő lépések