Tıklama Analizi Otomatik Toplama eklentisini etkinleştirme

Makale
11/05/2024

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

Veri Akışı Adı	Açıklama	Örnek
Veri Akışı Adı	Özel olayın adı. Bir adın doldurulma şekli hakkında daha fazla bilgi için bkz . Ad sütunu.	Hakkında
itemType	Olay türü.	customEvent
sdkVersion	Application Insights SDK'sının sürümü ve tıklama eklentisi.	JavaScript:2_ClickPlugin2

Özel boyutlar

Veri Akışı Adı	Açıklama	Örnek
actionType	Tıklama olayına neden olan eylem türü. Sol veya sağ tıklama olabilir.	CL
baseTypeSource	Özel olayın Temel Tür kaynağı.	TıklaEvent
clickCoordinates	Tıklama olayının tetiklendiği koordinatlar.	659X47
content	Ek `data-*` öznitelikleri ve değerleri depolamak için yer tutucu.	[{sample1:value1, sample2:value2}]
pageName	Tıklama olayının tetiklendiği sayfanın başlığı.	Örnek Başlık
parentId	Üst öğenin kimliği veya adı. ParentId'nin doldurulma şekli hakkında daha fazla bilgi için bkz . parentId anahtarı.	navbarContainer

Özel ölçümler

Veri Akışı Adı	Açıklama	Örnek
timeToAction	İlk sayfa yüklemeden bu yana kullanıcının öğeye tıklaması için milisaniye cinsinden geçen süre.	87407

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.

Not

31 Mart 2025’te izleme anahtarı alımı desteği sona erecektir. İzleme anahtarı alımı çalışmaya devam edecek, ancak artık özellik için güncelleştirme veya destek sağlamayacağız. Yeni özelliklerden yararlanmak için bağlantı dizesi geçiş.

Application Insights'ı etkinleştirmek istediğiniz her sayfanın en üstüne JavaScript (Web) SDK Yükleyici Betiğini yapıştırın.

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

JavaScript (Web) SDK Yükleyici Betiği yapılandırmasını eklemek veya güncelleştirmek için bkz . JavaScript (Web) SDK Yükleyici Betiği yapılandırması.

npm paketini yükleyin:

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

İpucu

Bir çerçeve uzantısı eklemek istiyorsanız veya zaten bir uzantı eklediyseniz, Tıklama Analizi eklentisini ekleme hakkında bilgi için React, React Native ve Angular kod örneklerine bakın.

(İ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:

customDataPrefix Gelişmiş yapılandırmada bildirmezse, id içinde sağlanan data-id ad olarak customEvent kullanılır.
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.
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.
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.

Dikkat

Uygulamanızdaki herhangi bir HTML öğesine eklendikten sonra parentDataTag SDK, yalnızca kullandığınız HTML öğesini değil uygulamanızın tamamında ana öğe etiketlerini aramaya başlar.
Heart çalışma kitabını Click Analytics eklentisiyle kullanıyorsanız, KALP olaylarının günlüğe kaydedilmesi veya algılanması için etiketin parentDataTag son kullanıcının uygulamasının diğer tüm bölümlerinde bildirilmesi gerekir.

`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

Adı	Tip	Varsayılan	Açıklama
autoCapture	Boolean	True	Otomatik yakalama yapılandırması.
geri çağırma	IValueCallback	Boş	Geri çağırma yapılandırması.
pageTags	Object	Boş	Sayfa etiketleri.
dataTags	ICustomDataTags	Boş	Tıklama verilerini yakalamak için kullanılan varsayılan etiketleri geçersiz kılmak için sağlanan özel Veri Etiketleri.
urlCollectHash	Boolean	False	URL'nin "#" karakterinden sonra değerlerin günlüğe kaydedilmesini sağlar.
urlCollectQuery	Boolean	False	URL'nin sorgu dizesinin günlüğe kaydedilmesini etkinleştirir.
behaviorValidator	İşlev	Boş	Değer doğrulaması için `data-*-bhvr` kullanılacak geri çağırma işlevi. Daha fazla bilgi için behaviorValidator bölümüne bakın.
defaultRightClickBhvr	Dize (veya) numarası	''	Sağ tıklama olayı gerçekleştiğinde varsayılan davranış değeri. öğesi özniteliğine sahipse bu değer geçersiz kılınmış `data-*-bhvr` olur.
dropInvalidEvents	Boolean	False	Yararlı tıklama verileri olmayan olayları bırakmak için bayrak ekleyin.

IValueCallback

Adı	Tip	Varsayılan	Açıklama
pageName	İşlev	Boş	Varsayılan `pageName` yakalama davranışını geçersiz kılma işlevi.
pageActionPageTags	İşlev	Boş	Bir olay sırasında toplanan varsayılan `pageTags` değeri artırmak için bir `pageAction` geri çağırma işlevi.
contentName	İşlev	Boş	Özelleştirilmiş `contentName`öğesini doldurmak için bir geri çağırma işlevi.

ICustomDataTags

Adı	Tip	Varsayılan	HTML'de kullanılacak varsayılan etiket	Açıklama
useDefaultContentNameOrId	Boolean	False	Yok	ise`true`, belirli bir öğe varsayılan veri ön eki veya `customDataPrefix`ile etiketlenmemişse için `contentName` standart HTML özniteliğini `id` toplar. Aksi takdirde için standart HTML özniteliği `id` `contentName` toplanmaz.
customDataPrefix	String	`data-`	`data-*`	Sağlanan ön ek ile etiketlenmiş öğelerin otomatik yakalama içerik adı ve değeri. Örneğin, `data-*-iddata-<yourcustomattribute>` HTML etiketlerinde kullanılabilir.
aiBlobAttributeTag	String	`ai-blob`	`data-ai-blob`	Eklenti, tek tek `data-*` öznitelikler yerine JSON blob özniteliğini destekler.
metaDataPrefix	String	Boş	Yok	Yakalandığında sağlanan ön ek ile HTML Head'in meta öğesi adını ve içeriğini otomatik yakalama. Örneğin, `custom-` HTML meta etiketinde kullanılabilir.
captureAllMetaDataContent	Boolean	False	Yok	Tüm HTML Head'in meta öğe adlarını ve içeriğini otomatik olarak yakalayın. Varsayılan değer yanlış'tır. Etkinleştirilirse, sağlanan `metaDataPrefix`öğesini geçersiz kılar.
parentDataTag	String	Boş	Yok	`parentId` Karşılaşıldığında veya `data-*-parentid` karşılaşılmadığında `data-parentid` günlüklerde öğesini getirir. Verimlilik için, veya `customDataPrefix-{parentDataTag}` özniteliğiyle karşılaşıldığında `data-{parentDataTag}` öğelerin içerik adını ve değerini yakalamak için DOM'a geçişi durdurur. Daha fazla bilgi için bkz . parentId anahtarı.
dntDataTag	String	`ai-dnt`	`data-ai-dnt`	Telemetri verilerini yakalama eklentisi bu öznitelikle HTML öğelerini yoksayar.

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.

Veri Akışı Adı	Açıklama
BehaviorValueValidator	Davranışınızın veri yapısı bir dize dizisiyse bu geri çağırma işlevini kullanın.
BehaviorMapValidator	Davranışınızın veri yapısı bir sözlükse bu geri çağırma işlevini kullanın.
BehaviorEnumValidator	Davranışınızın veri yapısı bir Enum ise bu geri çağırma işlevini kullanın.

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.

Aracılığıyla paylaş

Tıklama Analizi Otomatik Toplama eklentisini etkinleştirme

Önkoşullar

Eklenti hangi verileri toplar?

Özel olay özellikleri

Özel boyutlar

Özel ölçümler

Tıklama Analizi eklentisini ekleme

Kod ekleme

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

Eklentiyi kullanma

Telemetri veri depolama

`name`

`contentName`

`parentId` anahtar

`customDataPrefix`

Gelişmiş yapılandırma ekleme

IValueCallback

ICustomDataTags

behaviorValidator

Geri çağırma işlevleri

Dize ile sayısal değerleri geçirme

behaviorValidator ile örnek kullanım

Örnek uygulama

`parentId` Anahtar örnekleri

Örnek 1

Örnek 2

Örnek 3

Sorun giderme

Sonraki adımlar

Geri Bildirim

Ek kaynaklar

Aracılığıyla paylaş

Tıklama Analizi Otomatik Toplama eklentisini etkinleştirme

Önkoşullar

Eklenti hangi verileri toplar?

Özel olay özellikleri

Özel boyutlar

Özel ölçümler

Tıklama Analizi eklentisini ekleme

Kod ekleme

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

Eklentiyi kullanma

Telemetri veri depolama

name

contentName

parentId anahtar

customDataPrefix

Gelişmiş yapılandırma ekleme

IValueCallback

ICustomDataTags

behaviorValidator

Geri çağırma işlevleri

Dize ile sayısal değerleri geçirme

behaviorValidator ile örnek kullanım

Örnek uygulama

parentId Anahtar örnekleri

Örnek 1

Örnek 2

Örnek 3

Sorun giderme

Sonraki adımlar

Geri Bildirim

Ek kaynaklar

`name`

`contentName`

`parentId` anahtar

`customDataPrefix`

`parentId` Anahtar örnekleri