Bagikan melalui

Aktifkan plug-in Pengumpulan Otomatis Click Analytics

Ekstensi fitur Application Insights JavaScript SDK adalah fitur tambahan yang dapat ditambahkan ke Application Insights JavaScript SDK untuk meningkatkan fungsionalitasnya.

Dalam artikel ini, kami membahas plug-in Click Analytics, yang secara otomatis melacak peristiwa klik di halaman web dan menggunakan data-* atribut atau tag yang disesuaikan pada elemen HTML untuk mengisi telemetri peristiwa.

Prasyarat

Instal JavaScript SDK sebelum Anda mengaktifkan plug-in Click Analytics.

Data apa yang dikumpulkan oleh plug-in?

Properti kunci berikut diambil secara default saat plug-in diaktifkan.

Properti acara kustom

Nama Deskripsi Sampel
Nama Nama acara khusus. Untuk informasi selengkapnya tentang cara nama diisi, lihat kolom Nama. Tentang
jenisItem Jenis peristiwa. customEvent
Versi SDK Versi dari Application Insights SDK bersama dengan plugin klik. JavaScript:2_ClickPlugin2

Dimensi kustom

Nama Deskripsi Sampel
jenisAksi Jenis tindakan yang menyebabkan peristiwa klik. Ini bisa berupa klik kiri atau kanan. CL
baseTypeSource Sumber tipe dasar dari peristiwa kustom. KlikEvent
clickCoordinates Koordinat tempat peristiwa klik dipicu. 659X47
konten Tempat penampung untuk menyimpan atribut dan nilai tambahan data-* . [{sample1:value1, sample2:value2}]
Nama Halaman Judul halaman tempat peristiwa klik dipicu. Contoh Judul
parentId ID atau nama elemen induk. Untuk informasi selengkapnya tentang cara pengisian parentId, lihat kunci parentId. navbarContainer

Pengukuran khusus

Nama Deskripsi Sampel
WaktuUntukBertindak Waktu yang diperlukan dalam milidetik bagi pengguna untuk mengklik elemen sejak halaman awal dimuat. 87407

Tambahkan plug-in Click Analytics

Pengguna dapat menyiapkan plug-in Koleksi Otomatis Click Analytics melalui Skrip Pemuat SDK JavaScript (Web) atau npm lalu secara opsional menambahkan ekstensi kerangka kerja.

Catatan

Pada tanggal 31 Maret 2025, dukungan untuk penerimaan kunci instrumentasi akan berakhir. Penyerapan kunci instrumentasi akan berjalan terus, namun kami tidak akan lagi menyediakan pembaruan atau dukungan terhadap fitur tersebut. Transisi ke string koneksi untuk memanfaatkan kemampuan baru.

Menambahkan kode

Tempelkan Skrip Pemuat SDK JavaScript (Web) di bagian atas setiap halaman yang ingin Anda aktifkan Application Insights.

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

Untuk menambahkan atau memperbarui konfigurasi Skrip Pemuat SDK JavaScript (Web), lihat Konfigurasi Skrip Pemuat SDK JavaScript (Web).

Petunjuk

Jika Anda ingin menambahkan ekstensi kerangka kerja atau telah menambahkannya, lihat sampel kode React, React Native, dan Angular untuk cara menambahkan plug-in Click Analytics.

(Opsional) Mengatur konteks pengguna yang diautentikasi

Jika Anda ingin mengatur pengaturan opsional ini, lihat Mengatur konteks pengguna yang diautentikasi.

Jika Anda menggunakan buku kerja HEART dengan plug-in Click Analytics, Anda tidak perlu mengatur konteks pengguna yang diautentikasi untuk melihat data telemetri. Untuk informasi selengkapnya, lihat dokumentasi buku kerja HEART.

Gunakan plug-in

Bagian berikut menjelaskan cara menggunakan plug-in.

Penyimpanan data telemetri

Data telemetri yang dihasilkan dari peristiwa klik disimpan sebagai customEvents di bagian Log > Application Insights di portal Azure >.

name

Kolom name dari customEvent diisi berdasarkan aturan berikut:

  1. Jika customDataPrefix tidak dideklarasikan dalam konfigurasi lanjutan, id yang terdapat dalam data-id digunakan sebagai nama customEvent.
  2. Jika customDataPrefix dinyatakan, id yang disediakan dalam data-*-id, yang berarti harus dimulai dengan data dan diakhiri dengan id, digunakan sebagai nama customEvent. Misalnya, jika elemen HTML yang diklik memiliki atribut "data-sample-id"="button1", maka "button1" adalah customEvent nama.
  3. Jika atribut data-id atau data-*-id tidak ada dan jika useDefaultContentNameOrId diatur ke true, atribut HTML id dari elemen yang diklik atau nama konten dari elemen tersebut digunakan sebagai nama customEvent. Jika baik id maupun nama konten ada, prioritas diberikan kepada id.
  4. Jika useDefaultContentNameOrId adalah false, namanya customEvent adalah "not_specified". Sebaiknya atur useDefaultContentNameOrId ke true untuk menghasilkan data yang bermakna.

contentName

Jika Anda memiliki contentName fungsi callback dalam konfigurasi lanjutan yang ditentukan, contentName kolom customEvent diisi berdasarkan aturan berikut:

  • Untuk elemen HTML <a> yang diklik, plugin mencoba mengumpulkan nilai atribut innerText (teks). Jika plugin tidak dapat menemukan atribut ini, plugin mencoba mengumpulkan nilai atribut innerHtml-nya.

  • Untuk elemen HTML <img> atau <area> yang diklik, plugin mengumpulkan nilai dari atribut alt-nya.

  • Untuk semua elemen HTML lain yang diklik, contentName diisi berdasarkan aturan berikut, yang tercantum dalam urutan prioritas:

    1. Nilai atribut value untuk elemen
    2. Nilai atribut name untuk elemen
    3. Nilai atribut alt untuk elemen
    4. Nilai atribut innerText untuk elemen
    5. Nilai atribut id untuk elemen

parentId kunci

Untuk mengisi kunci parentId dalam customDimensions dari tabel customEvent di log, deklarasikan tag parentDataTag atau tentukan atribut data-parentid.

Nilai untuk parentId diambil berdasarkan aturan berikut:

  • Ketika Anda mendeklarasikan parentDataTag, plug-in mengambil nilai id atau data-*-id yang ditentukan dalam elemen yang paling dekat dengan elemen yang diklik, sebagai parentId.
  • Jika baik data-*-id maupun id didefinisikan, prioritas diberikan kepada data-*-id.
  • Jika parentDataTag didefinisikan tetapi plug-in tidak dapat menemukan tag ini di bawah pohon DOM, plug-in menggunakan id atau data-*-id ditentukan dalam elemen yang paling dekat dengan elemen yang diklik sebagai parentId. Namun, sebaiknya tentukan data-{parentDataTag} atribut atau customDataPrefix-{parentDataTag} untuk mengurangi jumlah perulangan yang diperlukan untuk menemukan parentId. Mendeklarasikan parentDataTag berguna ketika Anda perlu menggunakan plug-in dengan opsi yang disesuaikan.
  • Jika parentDataTag tidak ditentukan dan informasi parentId tidak disertakan dalam elemen saat ini, nilai parentId tidak dikumpulkan.
  • Jika parentDataTag didefinisikan, useDefaultContentNameOrId diatur ke false, dan hanya atribut id ditentukan dalam elemen yang paling dekat dengan elemen yang diklik, parentId diisi sebagai "not_specified". Untuk mengambil nilai id, atur useDefaultContentNameOrId ke true.

Saat Anda menentukan atribut data-parentid atau data-*-parentid, plug-in mengambil instans atribut ini yang paling dekat dengan elemen yang diklik, termasuk di dalam elemen yang diklik jika memungkinkan.

Jika Anda mendeklarasikan parentDataTag dan menentukan data-parentid atribut atau data-*-parentid , prioritas diberikan kepada data-parentid atau data-*-parentid.

Jika muncul peringatan telemetri "Baris Peristiwa Klik tanpa nilai parentId", lihat Memperbaiki peringatan "Baris Peristiwa Klik tanpa nilai parentId".

Untuk contoh yang menunjukkan nilai mana yang diambil sebagai parentId untuk konfigurasi yang berbeda, lihat Contoh parentid kunci.

Perhatian

  • Setelah parentDataTag disertakan dalam elemen HTML apa pun di seluruh aplikasi Anda, SDK mulai mencari tag induk di seluruh aplikasi Anda dan bukan hanya elemen HTML tempat Anda menggunakannya.
  • Jika Anda menggunakan buku kerja HEART dengan plug-in Click Analytics, agar peristiwa HEART dicatat atau terdeteksi, tag parentDataTag harus dideklarasikan di semua bagian lain dari aplikasi pengguna akhir.

customDataPrefix

Opsi customDataPrefix dalam konfigurasi lanjutan memberi pengguna kemampuan untuk mengonfigurasi awalan atribut data untuk membantu mengidentifikasi di mana jantung berada dalam basis kode individu. Awalan harus selalu huruf kecil dan dimulai dengan data-. Contohnya:

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

Dalam HTML, data-* atribut global disebut atribut data kustom yang memungkinkan informasi kepemilikan ditukar antara HTML dan representasi DOM-nya oleh skrip. Browser lama seperti Internet Explorer dan Safari menghapus atribut yang tidak mereka pahami, kecuali jika dimulai dengan data-.

Anda dapat mengganti tanda bintang (*) di data-* dengan nama apa pun yang sesuai aturan produksi nama XML dengan batasan berikut.

  • Nama tidak boleh dimulai dengan "xml," dengan huruf besar atau kecil apa pun.
  • Nama tidak boleh berisi titik koma (U+003A).
  • Nama tidak boleh mengandung huruf kapital.

Menambahkan konfigurasi tingkat lanjut

Nama Tipe Bawaan Deskripsi
autoCapture Boolean (tipe data yang hanya memiliki dua nilai: true atau false) Benar Konfigurasi pengambilan otomatis.
panggilan balik IValueCallback Nol Konfigurasi panggilan balik.
pageTags Objek Nol Tag halaman.
dataTags ICustomDataTags Nol Tag Data Kustom disediakan untuk menggantikan tag default yang digunakan untuk menangkap data klik.
urlCollecthash Boolean (tipe data yang hanya memiliki dua nilai: true atau false) Salah Mengaktifkan pengelogan nilai setelah karakter "#" URL.
KueriPengumpulanURL Boolean (tipe data yang hanya memiliki dua nilai: true atau false) Salah Mengaktifkan pencatatan string kueri dari URL.
pemeriksaPerilaku Fungsi Nol Fungsi panggilan balik yang digunakan untuk validasi nilai data-*-bhvr. Untuk informasi selengkapnya, lihat bagian behaviorValidator.
defaultRightClickBhvr String (atau) angka '' Nilai perilaku default saat peristiwa klik kanan telah terjadi. Nilai ini ditimpa jika elemen memiliki atribut data-*-bhvr.
hilangkanEventTidakValid Boolean (tipe data yang hanya memiliki dua nilai: true atau false) Salah Penanda untuk melewatkan peristiwa yang tidak memiliki data klik yang berguna.

IValueCallback

Nama Tipe Bawaan Deskripsi
Nama Halaman Fungsi Nol Fungsi untuk mengubah perilaku penangkapan default pageName.
pageActionPageTags Fungsi Nol Fungsi panggilan balik untuk menambahkan ke pageTags default yang dikumpulkan selama kejadian pageAction.
namaKonten Fungsi Nol Fungsi panggilan balik untuk mengisi yang dapat dikustomisasi contentName.

ICustomDataTags

Nama Tipe Bawaan Tag default untuk digunakan dalam HTML Deskripsi
useDefaultContentNameOrId Boolean (tipe data yang hanya memiliki dua nilai: true atau false) Salah Tidak Berlaku Jika true, akan mengumpulkan atribut HTML standar id untuk contentName ketika elemen tertentu tidak ditandai dengan awalan data default atau customDataPrefix. Jika tidak, atribut id HTML standar untuk contentName tidak dikumpulkan.
customDataPrefix string data- data-* Otomatis mengambil nama konten dan nilai elemen yang diberi tag dengan prefiks yang diberikan. Misalnya, data-*-id, data-<yourcustomattribute> dapat digunakan dalam tag HTML.
aiBlobAttributeTag string ai-blob data-ai-blob Plug-in mendukung atribut blob JSON alih-alih atribut individual data-* .
metaDataPrefix string Nol Tidak Berlaku Secara otomatis menangkap nama dan konten elemen meta di Kepala HTML dengan awalan yang disediakan saat ditangkap. Misalnya, custom- dapat digunakan dalam tag meta HTML.
captureAllMetaDataContent Boolean (tipe data yang hanya memiliki dua nilai: true atau false) Salah Tidak Berlaku Otomatis mengambil semua nama dan konten elemen meta HTML Head. Secara default adalah false. Jika diaktifkan, ini akan menggantikan metaDataPrefix yang telah disediakan.
parentDataTag string Nol Tidak Berlaku Mengambil parentId dalam log jika data-parentid atau data-*-parentid tidak ditemui. Untuk efisiensi, berhenti melintasi DOM untuk mengambil nama dan nilai elemen ketika atribut data-{parentDataTag} atau customDataPrefix-{parentDataTag} ditemui. Untuk informasi selengkapnya, lihat parentId key.
dntDataTag string ai-dnt data-ai-dnt Plug-in untuk menangkap data telemetri mengabaikan elemen HTML dengan atribut ini.

pemeriksaPerilaku

Fungsi behaviorValidator memeriksa secara otomatis apakah fungsi yang ditandai dalam kode sesuai dengan daftar yang telah ditentukan sebelumnya. Fungsi ini memastikan bahwa perilaku yang ditandai konsisten dengan taksonomi yang ditetapkan perusahaan Anda. Tidak diperlukan atau diharapkan bahwa sebagian besar pelanggan Azure Monitor menggunakan fungsi ini, tetapi tersedia untuk skenario tingkat lanjut. Fungsi behaviorValidator dapat membantu praktik yang lebih mudah diakses.

Perilaku muncul di bidang customDimensions dalam tabel CustomEvents.

Fungsi panggilan balik

Tiga fungsi panggilan balik yang berbeda behaviorValidator diekspos sebagai bagian dari ekstensi ini. Anda juga dapat menggunakan fungsi panggilan balik Anda sendiri jika fungsi yang diekspos tidak menyelesaikan persyaratan Anda. Tujuannya adalah untuk membawa struktur data perilaku Anda sendiri. Plug-in menggunakan fungsi validator ini saat mengekstrak perilaku dari tag data.

Nama Deskripsi
BehaviorValueValidator Gunakan fungsi panggilan balik ini jika struktur data perilaku Anda adalah array string.
PemeriksaPetaPerilaku Gunakan fungsi panggilan balik ini jika struktur data perilaku Anda adalah kamus.
BehaviorEnumValidator Gunakan fungsi panggilan balik ini jika struktur data perilaku Anda adalah Enum.

Memasukkan nilai string versus numerik

Untuk mengurangi byte yang Anda kirimkan, masukkan nilai numerik daripada string teks lengkap. Apabila biaya bukan masalah, Anda dapat mengirimkan string teks lengkap (misalnya, NAVIGATIONBACK).

Sampel penggunaan dengan behaviorValidator

Berikut adalah contoh tampilan validator peta perilaku. Milik Anda mungkin terlihat berbeda, tergantung pada taksonomi organisasi Anda dan acara yang Anda kumpulkan.

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

Aplikasi contoh

Lihat aplikasi web sederhana dengan Plug-in Autocollection Click Analytics diaktifkan untuk melihat bagaimana menerapkan properti peristiwa kustom seperti dan Name kustom perilaku dan konten. Lihat contoh readme aplikasi untuk informasi tentang tempat menemukan data klik.

Contoh kunci parentId

Contoh berikut menunjukkan nilai mana yang diambil sebagai parentId untuk konfigurasi yang berbeda.

Contoh menunjukkan bagaimana jika parentDataTag ditentukan tetapi plug-in tidak dapat menemukan tag ini di bawah pohon DOM, plug-in menggunakan id elemen induk terdekatnya.

Contoh 1

Dalam contoh 1, parentDataTag tidak dideklarasikan dan data-parentid atau data-*-parentid tidak ditentukan dalam elemen apa pun. Contoh ini menunjukkan konfigurasi di mana nilai untuk parentId tidak dikumpulkan.

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>

Untuk elemen <Button> yang diklik, nilainya parentId adalah not_specified, karena tidak ada parentDataTag detail yang ditentukan dan tidak ada ID elemen induk yang disediakan dalam elemen saat ini.

Contoh 2

Dalam contoh 2, parentDataTag dideklarasikan dan data-parentid didefinisikan. Contoh ini menunjukkan bagaimana detail ID induk dikumpulkan.

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>

Untuk elemen <Button>yang diklik , nilainya parentId adalah parentid2. Meskipun parentDataTag dinyatakan, data-parentid secara langsung didefinisikan dalam elemen . Oleh karena itu, nilai ini lebih diutamakan daripada semua ID induk atau detail ID lain yang ditentukan dalam elemen induknya.

Contoh 3

Dalam contoh 3, parentDataTag dideklarasikan dan data-parentid atribut atau data-*-parentid tidak ditentukan. Contoh ini menunjukkan bagaimana mendeklarasikan parentDataTag dapat membantu mengumpulkan nilai untuk parentId kasus ketika elemen dinamis tidak memiliki id atau data-*-id.

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>

Untuk elemen <Button>yang diklik , nilainya parentId adalah test6parent, karena parentDataTag dinyatakan. Deklarasi ini memungkinkan plugin untuk melintasi pohon elemen saat ini dan oleh karena itu ID induk terdekatnya akan digunakan ketika detail ID induk tidak secara langsung disediakan dalam elemen saat ini. Dengan data-group="buttongroup1" yang telah ditentukan, plug-in menemukan parentId secara lebih efisien.

Jika Anda menghapus data-group="buttongroup1" atribut, nilai parentId masih test6parent, karena parentDataTag masih dideklarasikan.

Pemecahan Masalah

Lihat artikel pemecahan masalah khusus.

Langkah berikutnya