Tıklama Analizi Otomatik Toplama eklentisini etkinleştirme

Application Insights JavaScript SDK'sı özellik uzantıları, işlevselliğini geliştirmek için Application Insights JavaScript SDK'sına eklenebilecek ek özelliklerdir.

Bu makalede, web sayfalarındaki tıklama olaylarını otomatik olarak izleyen ve olay telemetrisini doldurmak için HTML öğelerinde öznitelikleri veya özelleştirilmiş etiketleri kullanan data-* Click Analytics eklentisini ele alacağız.

Önkoşullar

Click Analytics eklentisini etkinleştirmeden önce JavaScript SDK'sını yükleyin.

Eklenti hangi verileri toplar?

Eklenti etkinleştirildiğinde aşağıdaki anahtar özellikler varsayılan olarak yakalanır.

Özel olay özellikleri

Özel boyutlar

Özel ölçümler

Tıklama Analizi eklentisini ekleme

Kullanıcılar Click Analytics Otomatik Toplama eklentisini JavaScript (Web) SDK Yükleyici Betiği veya npm aracılığıyla ayarlayabilir ve sonra isteğe bağlı olarak bir çerçeve uzantısı ekleyebilir.

Kod ekleme

<script type="text/javascript" src="https://js.monitor.azure.com/scripts/b/ext/ai.clck.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 = {
    connectionString: "YOUR_CONNECTION_STRING",
    // Alternatively, you can pass in the instrumentation key,
    // but support for instrumentation key ingestion will end on March 31, 2025.
    // instrumentationKey: "YOUR INSTRUMENTATION KEY",
    extensions: [
        clickPluginInstance
    ],
    extensionConfig: {
        [clickPluginInstance.identifier] : clickPluginConfig
    },
};
// Application Insights JavaScript (Web) SDK Loader Script code
!(function (cfg){function e(){cfg.onInit&&cfg.onInit(n)}var x,w,D,t,E,n,C=window,O=document,b=C.location,q="script",I="ingestionendpoint",L="disableExceptionTracking",j="ai.device.";"instrumentationKey"[x="toLowerCase"](),w="crossOrigin",D="POST",t="appInsightsSDK",E=cfg.name||"appInsights",(cfg.name||C[t])&&(C[t]=E),n=C[E]||function(g){var f=!1,m=!1,h={initialize:!0,queue:[],sv:"8",version:2,config:g};function v(e,t){var n={},i="Browser";function a(e){e=""+e;return 1===e.length?"0"+e:e}return n[j+"id"]=i[x](),n[j+"type"]=i,n["ai.operation.name"]=b&&b.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(h.sv||h.version),{time:(i=new Date).getUTCFullYear()+"-"+a(1+i.getUTCMonth())+"-"+a(i.getUTCDate())+"T"+a(i.getUTCHours())+":"+a(i.getUTCMinutes())+":"+a(i.getUTCSeconds())+"."+(i.getUTCMilliseconds()/1e3).toFixed(3).slice(2,5)+"Z",iKey:e,name:"Microsoft.ApplicationInsights."+e.replace(/-/g,"")+"."+t,sampleRate:100,tags:n,data:{baseData:{ver:2}},ver:undefined,seq:"1",aiDataContract:undefined}}var n,i,t,a,y=-1,T=0,S=["js.monitor.azure.com","js.cdn.applicationinsights.io","js.cdn.monitor.azure.com","js0.cdn.applicationinsights.io","js0.cdn.monitor.azure.com","js2.cdn.applicationinsights.io","js2.cdn.monitor.azure.com","az416426.vo.msecnd.net"],o=g.url||cfg.src,r=function(){return s(o,null)};function s(d,t){if((n=navigator)&&(~(n=(n.userAgent||"").toLowerCase()).indexOf("msie")||~n.indexOf("trident/"))&&~d.indexOf("ai.3")&&(d=d.replace(/(\/)(ai\.3\.)([^\d]*)$/,function(e,t,n){return t+"ai.2"+n})),!1!==cfg.cr)for(var e=0;e<S.length;e++)if(0<d.indexOf(S[e])){y=e;break}var n,i=function(e){var a,t,n,i,o,r,s,c,u,l;h.queue=[],m||(0<=y&&T+1<S.length?(a=(y+T+1)%S.length,p(d.replace(/^(.*\/\/)([\w\.]*)(\/.*)$/,function(e,t,n,i){return t+S[a]+i})),T+=1):(f=m=!0,s=d,!0!==cfg.dle&&(c=(t=function(){var e,t={},n=g.connectionString;if(n)for(var i=n.split(";"),a=0;a<i.length;a++){var o=i[a].split("=");2===o.length&&(t[o[0][x]()]=o[1])}return t[I]||(e=(n=t.endpointsuffix)?t.location:null,t[I]="https://"+(e?e+".":"")+"dc."+(n||"services.visualstudio.com")),t}()).instrumentationkey||g.instrumentationKey||"",t=(t=(t=t[I])&&"/"===t.slice(-1)?t.slice(0,-1):t)?t+"/v2/track":g.endpointUrl,t=g.userOverrideEndpointUrl||t,(n=[]).push((i="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",o=s,u=t,(l=(r=v(c,"Exception")).data).baseType="ExceptionData",l.baseData.exceptions=[{typeName:"SDKLoadFailed",message:i.replace(/\./g,"-"),hasFullStack:!1,stack:i+"\nSnippet failed to load ["+o+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(b&&b.pathname||"_unknown_")+"\nEndpoint: "+u,parsedStack:[]}],r)),n.push((l=s,i=t,(u=(o=v(c,"Message")).data).baseType="MessageData",(r=u.baseData).message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+l+")").replace(/\"/g,"")+'"',r.properties={endpoint:i},o)),s=n,c=t,JSON&&((u=C.fetch)&&!cfg.useXhr?u(c,{method:D,body:JSON.stringify(s),mode:"cors"}):XMLHttpRequest&&((l=new XMLHttpRequest).open(D,c),l.setRequestHeader("Content-type","application/json"),l.send(JSON.stringify(s)))))))},a=function(e,t){m||setTimeout(function(){!t&&h.core||i()},500),f=!1},p=function(e){var n=O.createElement(q),e=(n.src=e,t&&(n.integrity=t),n.setAttribute("data-ai-name",E),cfg[w]);return!e&&""!==e||"undefined"==n[w]||(n[w]=e),n.onload=a,n.onerror=i,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||a(0,t)},cfg.ld&&cfg.ld<0?O.getElementsByTagName("head")[0].appendChild(n):setTimeout(function(){O.getElementsByTagName(q)[0].parentNode.appendChild(n)},cfg.ld||0),n};p(d)}cfg.sri&&(n=o.match(/^((http[s]?:\/\/.*\/)\w+(\.\d+){1,5})\.(([\w]+\.){0,2}js)$/))&&6===n.length?(d="".concat(n[1],".integrity.json"),i="@".concat(n[4]),l=window.fetch,t=function(e){if(!e.ext||!e.ext[i]||!e.ext[i].file)throw Error("Error Loading JSON response");var t=e.ext[i].integrity||null;s(o=n[2]+e.ext[i].file,t)},l&&!cfg.useXhr?l(d,{method:"GET",mode:"cors"}).then(function(e){return e.json()["catch"](function(){return{}})}).then(t)["catch"](r):XMLHttpRequest&&((a=new XMLHttpRequest).open("GET",d),a.onreadystatechange=function(){if(a.readyState===XMLHttpRequest.DONE)if(200===a.status)try{t(JSON.parse(a.responseText))}catch(e){r()}else r()},a.send())):o&&r();try{h.cookie=O.cookie}catch(k){}function e(e){for(;e.length;)!function(t){h[t]=function(){var e=arguments;f||h.queue.push(function(){h[t].apply(h,e)})}}(e.pop())}var c,u,l="track",d="TrackPage",p="TrackEvent",l=(e([l+"Event",l+"PageView",l+"Exception",l+"Trace",l+"DependencyData",l+"Metric",l+"PageViewPerformance","start"+d,"stop"+d,"start"+p,"stop"+p,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),h.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},(g.extensionConfig||{}).ApplicationInsightsAnalytics||{});return!0!==g[L]&&!0!==l[L]&&(e(["_"+(c="onerror")]),u=C[c],C[c]=function(e,t,n,i,a){var o=u&&u(e,t,n,i,a);return!0!==o&&h["_"+c]({message:e,url:t,lineNumber:n,columnNumber:i,error:a,evt:C.event}),o},g.autoExceptionInstrumented=!0),h}(cfg.cfg),(C[E]=n).queue&&0===n.queue.length?(n.queue.push(e),n.trackPageView({})):e();})({                
  src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
  crossOrigin: "anonymous",
  // sri: false, // Custom optional value to specify whether fetching the snippet from integrity file and do integrity check
  cfg: configObj // configObj is defined above.
});
</script>

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 = {
  connectionString: "YOUR_CONNECTION_STRING", 
  // Alternatively, you can pass in the instrumentation key,
  // but support for instrumentation key ingestion will end on March 31, 2025.  
  // instrumentationKey: "YOUR INSTRUMENTATION KEY",
  extensions: [clickPluginInstance],
  extensionConfig: {
    [clickPluginInstance.identifier]: clickPluginConfig
  },
};

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

(İsteğe bağlı) Kimliği doğrulanmış kullanıcı bağlamını ayarlama

Bu isteğe bağlı ayarı ayarlamak istiyorsanız, bkz . Kimliği doğrulanmış kullanıcı bağlamını ayarlama.

Click Analytics eklentisiyle bir HEART çalışma kitabı kullanıyorsanız, telemetri verilerini görmek için kimliği doğrulanmış kullanıcı bağlamını ayarlamanız gerekmez. Daha fazla bilgi için HEART çalışma kitabı belgelerine bakın.

Eklentiyi kullanma

Aşağıdaki bölümlerde eklentinin nasıl kullanılacağı açıklanmaktadır.

Telemetri veri depolama

Tıklama olaylarından oluşturulan telemetri verileri, Azure portalı > Application Insights > Günlükleri bölümünde olduğu gibi customEvents depolanır.

name

name sütunu customEvent aşağıdaki kurallara göre doldurulur:

1. customDataPrefix Gelişmiş yapılandırmada bildirmezse, id içinde sağlanan data-id ad olarak customEvent kullanılır.
2. Bildirilirse customDataPrefix , id içinde data-*-idsağlanan değeri ile başlayıp data ile idbitmesi gerektiği anlamına gelir. Ad olarak customEvent kullanılır. Örneğin, tıklanan HTML öğesi özniteliğine "data-sample-id"="button1""button1" sahipse, adıdırcustomEvent.
3. data-id veya data-*-id özniteliği yoksa ve olarak ayarlanırsatrueuseDefaultContentNameOrId, tıklanan öğenin HTML özniteliği id veya öğenin içerik adı ad olarak customEvent kullanılır. Hem hem de id içerik adı varsa, öncelik olarak idverilir.
4. ise useDefaultContentNameOrId false, customEvent adı şeklindedir "not_specified". Anlamlı veriler oluşturmak için ayarını olarak true ayarlamanızı useDefaultContentNameOrId öneririz.

contentName

contentName Gelişmiş yapılandırmada geri çağırma işlevi tanımlanmışsa sütunu contentName customEvent aşağıdaki kurallara göre doldurulur:

• Tıklanan HTML <a> öğesi için eklenti, innerText (metin) özniteliğinin değerini toplamaya çalışır. Eklenti bu özniteliği bulamazsa innerHtml özniteliğinin değerini toplamaya çalışır.

• Tıklanan HTML <img> veya <area> öğe için eklenti, özniteliğinin alt değerini toplar.

• Diğer tüm tıklanan HTML öğeleri için, contentName öncelik sırasına göre listelenen aşağıdaki kurallara göre doldurulur:

  1. öğesinin value özniteliğinin değeri
  2. öğesinin name özniteliğinin değeri
  3. öğesinin alt özniteliğinin değeri
  4. öğesi için innerText özniteliğinin değeri
  5. öğesinin id özniteliğinin değeri

parentId anahtar

Günlüklerdeki parentId tablonun içindeki customDimensions customEvent anahtarı doldurmak için etiketi parentDataTag bildirin veya özniteliğini data-parentid tanımlayın.

için değeri parentId aşağıdaki kurallara göre getirilir:

• değerini bildirdiğinizde parentDataTag, eklenti tıklanan öğeye en yakın olan öğesinin veya öğesinin içinde tanımlanan değerini id data-*-id olarak parentIdgetirir.
• Ve her ikisi de data-*-id id tanımlanmışsa, öncelik öğesine data-*-idverilir.
• tanımlanmışsa ancak eklenti bu etiketi DOM ağacının altında bulamıyorsaparentDataTag, eklenti tıklanan öğeye en yakın öğede olarak parentIdtanımlanan veya data-*-id öğesini kullanırid. Ancak, bulmak parentIdiçin gereken döngü sayısını azaltmak için veya customDataPrefix-{parentDataTag} özniteliğini tanımlamanızı data-{parentDataTag} öneririz. Bildirim, parentDataTag eklentiyi özelleştirilmiş seçeneklerle kullanmanız gerektiğinde kullanışlıdır.
• Tanımlanmamışsa parentDataTag ve parentId geçerli öğeye hiçbir bilgi eklenmediyse, hiçbir parentId değer toplanmaz.
• tanımlanırsa parentDataTag , useDefaultContentNameOrId olarak falseayarlanır ve tıklanan öğeye en yakın öğe içinde yalnızca bir id öznitelik tanımlanır ve parentId öğesi olarak "not_specified"doldurulur. değerini idgetirmek için olarak ayarlayın useDefaultContentNameOrId true.

veya data-*-parentid özniteliğini data-parentid tanımladığınızda, eklenti bu özniteliğin tıklanan öğeye en yakın örneğini (varsa tıklanan öğe dahil) getirir.

veya özniteliğini data-parentid bildirir parentDataTag ve tanımlarsanız, öncelik veya data-*-parentid'ye data-parentid verilir.data-*-parentid

"ParentId değeri olmayan Olay satırlarına tıklayın" telemetri uyarısı görüntülenirse, "ParentId değeri olmayan Olay satırlarına tıklayın" uyarısını düzeltme konusuna bakın.

Farklı yapılandırmalar için hangi değerin getirildiğine parentId ilişkin örnekler için bkz. Anahtar örnekleriparentid.

customDataPrefix

customDataPrefix Gelişmiş yapılandırmadaki seçenek, kullanıcıya, kalbin kişinin kod tabanında nerede bulunduğunu belirlemeye yardımcı olacak bir veri özniteliği ön eki yapılandırma olanağı sağlar. Ön ek her zaman küçük olmalı ve ile data-başlamalıdır. Örneğin:

• data-heart-
• data-team-name-
• data-example-

HTML'de genel öznitelikler, data-* özel bilgilerin HTML ile DOM gösterimi arasında betikler tarafından değiştirilmesine olanak sağlayan özel veri öznitelikleri olarak adlandırılır. Internet Explorer ve Safari gibi eski tarayıcılar, ile data-başlamadıkları sürece anlamadıkları öznitelikleri bırakır.

içindeki data-* yıldız* () yerine XML adlarının üretim kuralını izleyen herhangi bir adı aşağıdaki kısıtlamalarla değiştirebilirsiniz.

• Ad, harfler için kullanılan her durumda "xml" ile başlamamalıdır.
• Ad noktalı virgül (U+003A) içermemelidir.
• Ad büyük harf içermemelidir.

Gelişmiş yapılandırma ekleme

IValueCallback

ICustomDataTags

behaviorValidator

İşlevler behaviorValidator , koddaki etiketli davranışların önceden tanımlanmış bir listeye uygun olup olmadığını otomatik olarak denetler. İşlevler, etiketli davranışların kuruluşunuzun yerleşik taksonomisiyle tutarlı olmasını sağlar. Azure İzleyici müşterilerinin çoğunun bu işlevleri kullanması gerekli veya beklenen bir durum değildir, ancak gelişmiş senaryolar için kullanılabilir. behaviorValidator işlevleri daha erişilebilir yöntemlerle yardımcı olabilir.

Davranışlar CustomEvents tablosunun customDimensions alanında gösterilir.

Geri çağırma işlevleri

Bu uzantının bir parçası olarak üç farklı behaviorValidator geri çağırma işlevi kullanıma sunulur. Kullanıma sunulan işlevler gereksinimlerinizi çözmezse kendi geri çağırma işlevlerinizi de kullanabilirsiniz. Amaç, kendi davranışlarınızın veri yapısını getirmektir. Eklenti, veri etiketlerinden davranışları ayıklarken bu doğrulayıcı işlevini kullanır.

Dize ile sayısal değerleri geçirme

Geçirdiğiniz bayt sayısını azaltmak için, tam metin dizesi yerine sayı değerini geçirin. Maliyet sorun değilse, tam metin dizesini geçirebilirsiniz (örneğin, NAVIGATIONBACK).

behaviorValidator ile örnek kullanım

Davranış haritası doğrulayıcının nasıl görünebileceğine bir örnek aşağıda verilmiştır. Kuruluşunuzun taksonomisine ve topladığınız olaylara bağlı olarak sizinki farklı görünebilir.

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

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

  ///////////////////////////////////////////////////////////////////////////////////////////////////
  // Intents [230-239]
  ///////////////////////////////////////////////////////////////////////////////////////////////////
  LEARNLOWFUNNEL: 230, // Engaging in learning behavior on a commerce page (for example, "Learn more click")
  LEARNHIGHFUNNEL: 231, // Engaging in learning behavior on a non-commerce page (for example, "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 = {
  connectionString: "YOUR_CONNECTION_STRING", 
  // Alternatively, you can pass in the instrumentation key,
  // but support for instrumentation key ingestion will end on March 31, 2025. 
  // 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();

Örnek uygulama

ve parentid gibi Name özel olay özellikleri ile özel davranış ve içerik uygulama için Click Analytics Otomatik Toplama Eklentisi'nin etkinleştirildiği basit bir web uygulamasına bakın. Tıklama verilerinin nerede bulunacağı hakkında bilgi için örnek uygulama benioku bölümüne bakın.

parentId Anahtar örnekleri

Aşağıdaki örneklerde farklı yapılandırmalar için olarak hangi değerin parentId getirildiği gösterilmektedir.

Örneklerde tanımlandığı parentDataTag ancak eklentinin DOM ağacının altında bu etiketi bulamadığını, eklentinin en yakın üst öğesini nasıl kullandığını id gösterir.

Örnek 1

Örnek 1'de, parentDataTag veya data-parentid data-*-parentid hiçbir öğede tanımlanmamıştır. Bu örnekte değerinin toplanmadığı bir parentId yapılandırma gösterilmektedir.

export const clickPluginConfigWithUseDefaultContentNameOrId = {
  dataTags : {
    customDataPrefix: "",
    parentDataTag: "",
    dntDataTag: "ai-dnt",
    captureAllMetaDataContent:false,
    useDefaultContentNameOrId: true,
    autoCapture: true
  },
}; 

<div className="test1" data-id="test1parent">
  <div>Test1</div>
  <div>with id, data-id, parent data-id defined</div>
  <Button id="id1" data-id="test1id" variant="info" onClick={trackEvent}>Test1</Button>
</div>

Tıklanan öğe <Button> için değeri parentId , “not_specified”hiçbir ayrıntı tanımlanmadığından parentDataTag ve geçerli öğe içinde üst öğe kimliği sağlanmadığından şeklindedir.

Örnek 2

Örnek 2'de bildirilir parentDataTag ve data-parentid tanımlanır. Bu örnek, üst kimlik ayrıntılarının nasıl toplandığını gösterir.

export const clickPluginConfigWithParentDataTag = {
  dataTags : {
    customDataPrefix: "",
    parentDataTag: "group",
    ntDataTag: "ai-dnt",
    captureAllMetaDataContent:false,
    useDefaultContentNameOrId: false,
    autoCapture: true
  },
};

<div className="test2" data-group="buttongroup1" data-id="test2parent">
  <div>Test2</div>
  <div>with data-id, parentid, parent data-id defined</div>
  <Button data-id="test2id" data-parentid = "parentid2" variant="info" onClick={trackEvent}>Test2</Button>
</div>

Tıklanan öğesi <Button>için değeri parentId şeklindedir parentid2. bildirilirdata-parentid, ancak parentDataTag doğrudan öğesi içinde tanımlanır. Bu nedenle, bu değer üst öğelerinde tanımlanan diğer tüm üst kimliklere veya kimlik ayrıntılarına göre önceliklidir.

Örnek 3

Örnek 3'te bildirilir parentDataTag ve data-parentid veya data-*-parentid özniteliği tanımlanmamıştır. Bu örnekte, dinamik parentDataTag öğelerin veya data-*-idöğesi olmadığında id bildirimde bulunarak bu durumlara parentId yönelik bir değer toplamanın nasıl yararlı olabileceği gösterilmektedir.

export const clickPluginConfigWithParentDataTag = {
  dataTags : {
    customDataPrefix: "",
    parentDataTag: "group",
    dntDataTag: "ai-dnt",
    captureAllMetaDataContent:false,
    useDefaultContentNameOrId: false,
    autoCapture: true
  },
};

<div className="test6" data-group="buttongroup1" data-id="test6grandparent">
  <div>Test6</div>
  <div>with data-id, grandparent data-group defined, parent data-id defined</div>
  <div data-id="test6parent">
    <Button data-id="test6id" variant="info" onClick={trackEvent}>Test6</Button>
  </div>
</div>

Tıklanan öğesi <Button>için değeri parentId , test6parentçünkü parentDataTag bildirilir. Bu bildirim eklentinin geçerli öğe ağacından geçiş yapmasına olanak tanır ve bu nedenle üst kimlik ayrıntıları geçerli öğe içinde doğrudan sağlanmamışsa en yakın üst öğesinin kimliği kullanılır. tanımlandığında data-group="buttongroup1" eklenti, eklentiyi parentId daha verimli bulur.

özniteliğini data-group="buttongroup1" kaldırırsanız değeri parentId hala test6parentdeğeridir çünkü parentDataTag yine de bildirilir.

Sorun giderme

Ayrılmış sorun giderme makalesine bakın.

Sonraki adımlar

• Verilerin aktığını onaylayın.
• Genişletilmiş ürün analizi için HEART çalışma kitabını kullanma belgelerine bakın.
• Tıklama Analizi Otomatik Toplama Eklentisi için GitHub deposuna ve npm Paketi'ne bakın.
• En iyi tıklamaları analiz etmek ve kullanılabilir boyutlara göre dilimlemek için Kullanım deneyiminde Olay Analizi'ni kullanın.
• Sorgu yazma işlemini bilmiyorsanız bkz . Log Analytics .
• Tıklama verilerinin özel görselleştirmelerini oluşturmak için bir çalışma kitabı oluşturun veya Power BI'a aktarın.