Aracılığıyla paylaş

Tıklama Analitiği Otomatik Toplama eklentisini etkinleştir

Application Insights JavaScript SDK özellik uzantıları, Application Insights JavaScript SDK'sine eklenebilen ve işlevselliğini artıran ekstra özelliklerdir.

Bu makalede, web sayfalarındaki tıklama olaylarını otomatik olarak izleyen ve olay telemetrisini doldurmak için HTML öğeleri üzerindeki data-* niteliklerini veya özelleştirilmiş etiketleri kullanan Tıklama Analitiği eklentisini ele alıyoruz.

Ö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 ana özellikler varsayılan olarak yakalanır.

Özel etkinlik özellikleri

İsim Açıklama Örnek
İsim Özel etkinliğin adı. Bir adın doldurulma şekli hakkında daha fazla bilgi için bkz. Ad sütunu. Hakkında
öğe türü Etkinlik türü. özelleştirilmiş etkinlik
SDK sürümü Uygulama Insights SDK'nin sürümü ve tıklama eklentisi ile birlikte. JavaScript:2_ClickPlugin2

Özel boyutlar

İsim Açıklama Örnek
işlem türü 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ıklama Olayı
clickCoordinates Tıklama olayının tetiklendiği koordinatlar. 659X47
içerik Ekstra data-* öznitelikleri ve değerleri depolamak için yer tutucu. [{sample1:value1, sample2:value2}]
sayfaAdı Tıklama olayının tetiklendiği sayfanın başlığı. Örnek Başlık
parentId (ebeveyn Kimliği) Üst öğenin ID'si veya adı. ParentId'nin doldurulma şekli hakkında daha fazla bilgi için bkz. parentId anahtarı. navbarContainer

Özel ölçümler

İsim Açıklama Örnek
eyleme geçme zamanı Kullanıcının, sayfa yüklendikten sonra bir öğeye tıklaması için geçen süre, milisaniye cinsinden. 87407

Click Analytics eklentisini ekle

Kullanıcılar, Tıklama Analitiği Otomatik Toplama eklentisini JavaScript (Web) SDK Yükleyici Betiği veya npm aracılığıyla kurabilir ve ardından isteğe bağlı olarak bir çerçeve uzantısı ekleyebilirler.

Uyarı

31 Mart 2025 tarihinde, enstrüman anahtarı alımı desteği sona erecek. Enstrümantasyon anahtarı alımı çalışmaya devam edecek, ancak bu özellik için artık güncellemeler veya destek sağlamayacağız. Yeni özelliklerden yararlanmak için bağlantı dizelerine geçiş yapın.

Kodu ekle

Uygulama Insights'ı etkinleştirmek istediğiniz her sayfanın en üstüne JavaScript (Web) SDK Yükleyici Komut Dosyasını 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ı.

İ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ı) Kimlik doğrulanmış kullanıcı bağlamını ayarla

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

Eğer Click Analytics eklentisi ile bir HEART çalışma kitabı kullanıyorsanız, telemetri verilerini görmek için doğrulanmış kullanıcı bağlamını ayarlamanıza gerek yok. Daha fazla bilgi için HEART çalışma kitabı belgelerine bakın.

Eklentiyi kullan

Aşağıdaki bölümler, eklentinin nasıl kullanılacağını açıklar.

Telemetri veri depolama

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

name

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

  1. Eğer customDataPrefix gelişmiş yapılandırmada bildirilmemişse, id içinde sağlanan data-id, customEvent adı olarak kullanılır.
  2. Eğer customDataPrefix ilan edilirse, id içinde sağlanan data-*-id, data ile başlayıp id ile bitmesi gerektiği anlamına gelir ve bu nedenle ad olarak customEvent kullanılır. Örneğin, tıklanan HTML öğesinin "data-sample-id"="button1" özniteliği varsa, "button1" öğesinin adı customEvent'dir.
  3. Eğer data-id veya data-*-id özelliği yoksa ve useDefaultContentNameOrIdtrue olarak ayarlandıysa, tıklanan öğenin HTML özelliği id veya öğenin içerik adı customEvent adı olarak kullanılır. Eğer hem id hem de içerik adı mevcutsa, öncelik id'e verilir.
  4. Eğer useDefaultContentNameOrId, false ise, customEvent adı "not_specified" olur. useDefaultContentNameOrId'yi true olarak ayarlamanızı öneriyoruz, böylece anlamlı veriler oluşturabilirsiniz.

contentName

Gelişmiş yapılandırmada tanımlanmış geri arama işleviniz varsa, contentName'ün sütunu aşağıdaki kurallara göre doldurulur:

  • Tıklanmış bir HTML <a> öğesi için, eklenti, iç metin (innerText) ö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 aşağıdaki kurallara göre öncelik sırasına göre doldurulur:

    1. Öğenin value özelliğinin değeri
    2. Öğenin name özelliğinin değeri
    3. Öğenin alt özelliğinin değeri
    4. Öğenin innerText niteliğinin değeri
    5. Öğenin id özelliğinin değeri

parentId anahtar

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

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

  • parentDataTag öğesini beyan ettiğinizde, eklenti id veya data-*-id değerini, tıklanan öğeye en yakın olan öğe içinde tanımlandığı şekilde parentId olarak alır.
  • Eğer hem data-*-id hem de id tanımlanmışsa, öncelik data-*-id'ye verilir.
  • Eğer parentDataTag tanımlanmışsa ancak eklenti bu etiketi DOM ağacının altında bulamıyorsa, eklenti, tıklanan öğeye en yakın öğenin içinde id veya data-*-id olarak tanımlanan parentId etiketini kullanır. Ancak, data-{parentDataTag}'yi bulmak için gereken döngü sayısını azaltmak amacıyla customDataPrefix-{parentDataTag} veya parentId özelliğini tanımlamanızı öneririz. parentDataTag'yi deklarasyon, eklentiyi özelleştirilmiş seçeneklerle kullanmanız gerektiğinde kullanışlıdır.
  • Eğer hiçbir parentDataTag tanımlanmadıysa ve mevcut öğede parentId bilgisi yoksa, hiçbir parentId değeri toplanmaz.
  • Eğer parentDataTag tanımlanmışsa, useDefaultContentNameOrIdfalse olarak ayarlanır ve sadece tıklanan elemana en yakın öğede bir id özelliği tanımlanmışsa, parentId, "not_specified" olarak doldurulur. id değerini almak için, useDefaultContentNameOrId'i true olarak ayarlayın.

data-parentid veya data-*-parentid özelliğini tanımladığınızda, eklenti, tıklanan öğeye en yakın olan bu özelliğin örneğini, eğer uygulanabilirse tıklanan öğenin içinde de dahil olmak üzere, alır.

Eğer parentDataTag'u beyan ederseniz ve data-parentid veya data-*-parentid niteliğini tanımlarsanız, öncelik data-parentid veya data-*-parentid'e verilir.

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

parentId değerin farklı yapılandırmalar için nasıl getirildiğine ilişkin örnekler için parentid anahtarı örnekleri'ye bakın.

Dikkat

  • Uygulamanızdaki herhangi bir HTML unsuruna bir kez parentDataTag eklendiğinde, SDK tüm uygulamanızda ebeveyn etiketlerini aramaya başlar ve sadece onu kullandığınız HTML unsurunda değil.
  • Click Analytics eklentisiyle birlikte HEART çalışma kitabını kullanıyorsanız, HEART olaylarının kaydedilmesi veya algılanması için parentDataTag etiketi, bir son kullanıcının uygulamasının diğer tüm bölümlerinde belirtilmelidir.

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, data-* küresel nitelikler, betikler tarafından HTML ile onun DOM temsili arasında özel bilgilerin değişimini sağlayan özel veri nitelikleri olarak adlandırılır. Internet Explorer ve Safari gibi eski tarayıcılar, eğer data- ile başlamazsa anlamadıkları öznitelikleri bırakır.

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

  • İsim hangi harf biçimi kullanılırsa kullanılsın "xml" ile başlamamalıdır.
  • Ad, noktalı virgül (U+003B) içermemelidir.
  • İsimde büyük harfler bulunmamalıdır.

Gelişmiş yapılandırma ekle

İsim Türü Varsayılan Açıklama
otomatik Yakalama Boolean (Boole Mantığı) Doğru Otomatik yakalama yapılandırması.
geri arama IValueCallback Sıfır Geri aramalar yapılandırması.
sayfaEtiketleri Nesne Sıfır Sayfa etiketleri.
bilgiEtiketleri ICustomDataTags Sıfır Varsayılan etiketleri geçersiz kılmak için sağlanan özel veri etiketleri, tıklama verilerini yakalamak üzere kullanılır.
urlCollectHash Boolean (Boole Mantığı) Yanlış URL'nin "#" karakterinden sonra değerlerin kayıt edilmesini mümkün kılar.
URLToplaSorgu Boolean (Boole Mantığı) Yanlış URL'in sorgu dizisinin kaydedilmesini etkinleştirir.
davranışDoğrulayıcı Fonksiyon Sıfır data-*-bhvr değer doğrulaması için kullanılacak geri çağırma fonksiyonu. Daha fazla bilgi için behaviorValidator bölümüne bakın.
varsayılanSağTıklamaDvnş Dize (veya) numarası '' Sağ tıklama olayı gerçekleştiğinde varsayılan davranış değeri. Bu değer, öğe data-*-bhvr özelliğine sahipse geçersiz kılınır.
GeçersizOlaylarıAt Boolean (Boole Mantığı) Yanlış Yararlı tıklama verilerine sahip olmayan etkinlikleri atlamak için bayrak.

IValueCallback

İsim Türü Varsayılan Açıklama
sayfaAdı Fonksiyon Sıfır Varsayılan pageName yakalama davranışını geçersiz kılmak için fonksiyon.
sayfaEylemSayfaEtiketleri Fonksiyon Sıfır pageTags etkinliği sırasında toplanan varsayılan pageAction öğesini artırmak için bir geri çağırma işlevi.
içerikAdı Fonksiyon Sıfır Özelleştirilmiş contentName'yi doldurmak için bir geri çağırma işlevi.

ICustomDataTags

İsim Türü Varsayılan HTML'de kullanmak için varsayılan etiket Açıklama
VarsayılanİçerikAdıVeyaIdKullan Boolean (Boole Mantığı) Yanlış Mevcut Değil Belirli bir öğe varsayılan veri ön eki veya true ile etiketlenmemişse id için standart HTML özelliği contentName toplar. Aksi takdirde, id için standart HTML özelliği contentName toplanmaz.
customDataPrefix Dize data- data-* Sağlanan önekle etiketlenmiş öğelerin otomatik yakalama içeriği adı ve değeri. Örneğin, data-*-id, data-<yourcustomattribute> HTML etiketlerinde kullanılabilir.
aiBlobAttributeTag Dize ai-blob data-ai-blob Eklenti, tek tek data-* öznitelikler yerine JSON blob özniteliğini destekler.
metaDataPrefix Dize Sıfır Mevcut Değil HTML Başlığının meta öğesi adı ve sağlanan önekle içerik otomatik olarak yakalandığında yakalanır. Örneğin, custom- HTML meta etiketinde kullanılabilir.
TümMetaVeriİçeriğiniYakala Boolean (Boole Mantığı) Yanlış Mevcut Değil HTML Başlığındaki tüm meta eleman adlarını ve içeriklerini otomatik olarak yakala. Varsayılan yanlış. Etkinleştirildiğinde, sağlanan metaDataPrefix'un yerine geçer.
parentDataTag Dize Sıfır Mevcut Değil parentId veya data-parentid karşılaşılmadığında, günlüklerdeki data-*-parentid'yı getirir. Verimlilik için, data-{parentDataTag} veya customDataPrefix-{parentDataTag} özelliği karşılaşıldığında, içerik adı ve değerini ele geçirmek için DOM'u yukarı doğru taramayı durdurur. Daha fazla bilgi için bkz. parentId anahtarı.
dntDataTag Dize ai-dnt data-ai-dnt Telemetri verilerini yakalamak için kullanılan eklenti, bu özelliğe sahip HTML öğelerini göz ardı eder.

davranışDoğrulayıcı

behaviorValidator işlevleri, kodda etiketlenmiş davranışların önceden tanımlanmış bir listeye uygun olup olmadığını otomatik olarak kontrol eder. Fonksiyonlar, etiketlenmiş davranışların işletmenizin belirlenmiş taksonomisi ile tutarlı olmasını sağlar. Çoğu Azure Monitor müşterisinin bu işlevleri kullanması gerekmemekte veya beklenmemektedir, ancak bu işlevler ileri düzey senaryolar için mevcuttur. behaviorValidator işlevleri, daha erişilebilir uygulamalara yardımcı olabilir.

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

Geri çağırma fonksiyonları

Bu uzantının bir parçası olarak üç farklı behaviorValidator geri arama fonksiyonu bulunmaktadır. Gereksinimlerinizi karşılamıyorsa, kendi geriçağırma işlevlerinizi de kullanabilirsiniz. Amacınız, kendi davranışlarınızın veri yapısını getirmek. Eklenti, davranışları veri etiketlerinden çıkarırken bu doğrulayıcı fonksiyonu kullanır.

İsim Açıklama
DavranışDeğerDoğrulayıcı Davranışınızın veri yapısı bir dizi karakter dizisi ise, bu geri çağırma fonksiyonunu kullanın.
Davranış Haritası Doğrulayıcısı Davranışınızın veri yapısı bir sözlük ise bu geri çağırma fonksiyonunu kullanın.
DavranışEnumDoğrulayıcı Davranışınızın veri yapısı bir Enum ise bu geri çağırma fonksiyonunu kullanın.

Dize ve sayısal değerlerin geçişi

Baytları azaltmak için, tam metin dizesi yerine sayı değerini gönderin. 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

Basit bir web uygulamasında Click Analytics Otomatik Toplama Eklentisi özelliğinin etkin olduğu bir örneğe bakarak özel ve Name gibi olay özelliklerini ve özel davranış ve içeriği nasıl uygulayacağınızı öğrenin. Tıklama verilerinin nerede bulunacağı hakkında bilgi için örnek uygulama rehberi bölümüne bakın.

parentId anahtarının örnekleri

Aşağıdaki örnekler, farklı yapılandırmalar için hangi değerin parentId olarak getirildiğini göstermektedir.

Örnekler, parentDataTag tanımlandığında ancak eklenti DOM ağacında bu etiketi bulamadığında, eklentinin en yakın üst öğenin id değerini nasıl kullandığını gösterir.

Örnek 1

Örnek 1'de, parentDataTag veya data-parentiddata-*-parentid hiçbir öğede tanımlanmamıştır. Bu örnek, parentId için bir değerin toplanmadığı bir yapılandırmayı gösterir.

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 <Button> elemanı için parentId değeri not_specified'dir, çünkü parentDataTag detayları tanımlanmamıştır ve mevcut eleman içinde herhangi bir üst eleman kimliği sağlanmamıştır.

Örnek 2

Örnek 2'de, parentDataTag bildirildi ve data-parentid tanımlandı. Bu örnek, ebeveyn kimliği 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ıklanmış eleman <Button> için, parentId değeri parentid2. parentDataTag ilan edilmesine rağmen, data-parentid doğrudan eleman içinde tanımlanmıştır. Bu nedenle, bu değer, ana elemanlarında tanımlanan diğer tüm üst ID’ler veya ID detaylarından daha önceliklidir.

Örnek 3

Örnek 3'te, parentDataTag ilan edilir ve data-parentid veya data-*-parentid özelliği tanımlanmamıştır. Bu örnek, parentDataTag bildiriminin, dinamik öğelerin parentId veya id bulunmadığı durumlarda data-*-id için bir değer toplamanın ne kadar yardımcı olabileceğini gösterir.

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 öğe <Button> için, parentId değeri test6parent'dir, çünkü parentDataTag beyan edilmiştir. Bu deklarasyon, eklentinin mevcut eleman ağacını dolaşmasını sağlar ve bu nedenle, ana eleman kimlik detayları mevcut eleman içinde doğrudan sağlanmadığında, en yakın ebeveynin kimliği kullanılacaktır. data-group="buttongroup1" tanımlandığında, eklenti parentId öğesini daha verimli bir şekilde bulur.

data-group="buttongroup1" özniteliğini kaldırırsanız, parentId yine de bildirildiği için test6parent 'in değeri hala parentDataTag olur.

Sorun giderme

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

Sonraki Adımlar