Mengaktifkan plug-in Koleksi Otomatis Click Analytics

  • Artikel

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 plug-in?

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

Properti peristiwa kustom

Nama Deskripsi Sampel
Nama Nama peristiwa kustom. Untuk informasi selengkapnya tentang cara nama diisi, lihat Kolom nama. Tentang
itemType Jenis peristiwa. customEvent
sdkVersion Versi Application Insights SDK bersama dengan klik plug-in. JavaScript:2_ClickPlugin2

Dimensi kustom

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

Pengukuran kustom

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

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

  1. 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(i)}var S,u,D,t,n,i,C=window,x=document,w=C.location,I="script",b="ingestionendpoint",E="disableExceptionTracking",A="ai.device.";"instrumentationKey"[S="toLowerCase"](),u="crossOrigin",D="POST",t="appInsightsSDK",n=cfg.name||"appInsights",(cfg.name||C[t])&&(C[t]=n),i=C[n]||function(l){var d=!1,g=!1,f={initialize:!0,queue:[],sv:"7",version:2,config:l};function m(e,t){var n={},i="Browser";function a(e){e=""+e;return 1===e.length?"0"+e:e}return n[A+"id"]=i[S](),n[A+"type"]=i,n["ai.operation.name"]=w&&w.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(f.sv||f.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:4,seq:"1",aiDataContract:undefined}}var h=-1,v=0,y=["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"],k=l.url||cfg.src;if(k){if((n=navigator)&&(~(n=(n.userAgent||"").toLowerCase()).indexOf("msie")||~n.indexOf("trident/"))&&~k.indexOf("ai.3")&&(k=k.replace(/(\/)(ai\.3\.)([^\d]*)$/,function(e,t,n){return t+"ai.2"+n})),!1!==cfg.cr)for(var e=0;e<y.length;e++)if(0<k.indexOf(y[e])){h=e;break}var i=function(e){var a,t,n,i,o,r,s,c,p,u;f.queue=[],g||(0<=h&&v+1<y.length?(a=(h+v+1)%y.length,T(k.replace(/^(.*\/\/)([\w\.]*)(\/.*)$/,function(e,t,n,i){return t+y[a]+i})),v+=1):(d=g=!0,o=k,c=(p=function(){var e,t={},n=l.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][S]()]=o[1])}return t[b]||(e=(n=t.endpointsuffix)?t.location:null,t[b]="https://"+(e?e+".":"")+"dc."+(n||"services.visualstudio.com")),t}()).instrumentationkey||l.instrumentationKey||"",p=(p=p[b])?p+"/v2/track":l.endpointUrl,(u=[]).push((t="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",n=o,r=p,(s=(i=m(c,"Exception")).data).baseType="ExceptionData",s.baseData.exceptions=[{typeName:"SDKLoadFailed",message:t.replace(/\./g,"-"),hasFullStack:!1,stack:t+"\nSnippet failed to load ["+n+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(w&&w.pathname||"_unknown_")+"\nEndpoint: "+r,parsedStack:[]}],i)),u.push((s=o,t=p,(r=(n=m(c,"Message")).data).baseType="MessageData",(i=r.baseData).message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+s+")").replace(/\"/g,"")+'"',i.properties={endpoint:t},n)),o=u,c=p,JSON&&((r=C.fetch)&&!cfg.useXhr?r(c,{method:D,body:JSON.stringify(o),mode:"cors"}):XMLHttpRequest&&((s=new XMLHttpRequest).open(D,c),s.setRequestHeader("Content-type","application/json"),s.send(JSON.stringify(o))))))},a=function(e,t){g||setTimeout(function(){!t&&f.core||i()},500),d=!1},T=function(e){var n=x.createElement(I),e=(n.src=e,cfg[u]);return!e&&""!==e||"undefined"==n[u]||(n[u]=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?x.getElementsByTagName("head")[0].appendChild(n):setTimeout(function(){x.getElementsByTagName(I)[0].parentNode.appendChild(n)},cfg.ld||0),n};T(k)}try{f.cookie=x.cookie}catch(p){}function t(e){for(;e.length;)!function(t){f[t]=function(){var e=arguments;d||f.queue.push(function(){f[t].apply(f,e)})}}(e.pop())}var r,s,n="track",o="TrackPage",c="TrackEvent",n=(t([n+"Event",n+"PageView",n+"Exception",n+"Trace",n+"DependencyData",n+"Metric",n+"PageViewPerformance","start"+o,"stop"+o,"start"+c,"stop"+c,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),f.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},(l.extensionConfig||{}).ApplicationInsightsAnalytics||{});return!0!==l[E]&&!0!==n[E]&&(t(["_"+(r="onerror")]),s=C[r],C[r]=function(e,t,n,i,a){var o=s&&s(e,t,n,i,a);return!0!==o&&f["_"+r]({message:e,url:t,lineNumber:n,columnNumber:i,error:a,evt:C.event}),o},l.autoExceptionInstrumented=!0),f}(cfg.cfg),(C[n]=i).queue&&0===i.queue.length?(i.queue.push(e),i.trackPageView({})):e();})({
 				src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
 				crossOrigin: "anonymous",
 				cfg: configObj // configObj is defined above.
 		});
 </script>

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

Tip

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.

Menggunakan plug-in

Bagian berikut menjelaskan cara menggunakan plug-in.

Penyimpanan data telemetri

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

name

Kolom name diisi customEvent berdasarkan aturan berikut:

  1. Jika customDataPrefix tidak dideklarasikan dalam konfigurasi lanjutan id , yang disediakan dalam data-id digunakan sebagai customEvent nama.
  2. Jika customDataPrefix dinyatakan, id yang disediakan dalam data-*-id, yang berarti harus dimulai dengan data dan diakhir dengan id, digunakan sebagai customEvent nama. Misalnya, jika elemen HTML yang diklik memiliki atribut "data-sample-id"="button1", maka "button1" adalah customEvent nama.
  3. data-id Jika atribut atau data-*-id tidak ada dan jika useDefaultContentNameOrId diatur ke true, atribut id HTML elemen yang diklik atau nama konten elemen digunakan sebagai customEvent nama. Jika nama id konten dan 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 panggilan balik dalam konfigurasi tingkat lanjut 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 HTML <img> atau <area> elemen yang diklik, plugin mengumpulkan nilai atributnya alt .

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

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

parentId Kunci

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

Nilai untuk parentId diambil berdasarkan aturan berikut:

  • Ketika Anda mendeklarasikan parentDataTag, plug-in mengambil nilai id atau data-*-id ditentukan dalam elemen yang paling dekat dengan elemen yang diklik sebagai parentId.
  • Jika dan data-*-idid 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 tidak ada parentDataTag yang ditentukan dan tidak ada parentId informasi yang disertakan dalam elemen saat ini, tidak ada parentId nilai yang dikumpulkan.
  • Jika parentDataTag didefinisikan, useDefaultContentNameOrId diatur ke false, dan hanya atribut yang id ditentukan dalam elemen yang paling dekat dengan elemen yang diklik, yang parentId diisi sebagai "not_specified". Untuk mengambil nilai id, atur useDefaultContentNameOrId ke true.

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

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

Jika peringatan telemetri "Klik Baris peristiwa tanpa nilai parentId", lihat Memperbaiki peringatan "Klik Baris peristiwa 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 atribut Internet Explorer dan Safari drop yang tidak mereka pahami, kecuali jika dimulai dengan data-.

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

  • Nama tidak boleh dimulai dengan "xml," kasus apa pun yang digunakan untuk huruf.
  • Nama tidak boleh berisi titik koma (U+003A).
  • Nama tidak boleh mengandung huruf kapital.

Menambahkan konfigurasi tingkat lanjut

Nama Tipe Default Deskripsi
autoCapture Boolean Benar Konfigurasi pengambilan otomatis.
panggilan balik ValueCallback Null Konfigurasi panggilan balik.
pageTags Objek Null Tag halaman.
dataTags ICustomDataTags Null Tag Data Kustom disediakan untuk mengambil alih tag default yang digunakan untuk mengambil data klik.
urlCollecthash Boolean Salah Mengaktifkan pengelogan nilai setelah karakter "#" URL.
urlCollectQuery Boolean Salah Mengaktifkan pengelogan string kueri URL.
behaviorValidator Function Null Fungsi panggilan balik yang digunakan untuk validasi nilai data-*-bhvr. Untuk informasi selengkapnya, lihat bagian behaviorValidator.
defaultRightClickBhvr String (atau) nomor '' Nilai perilaku default saat peristiwa klik kanan telah terjadi. Nilai ini ditimpa jika elemen memiliki data-*-bhvr atribut .
dropInvalidEvents Boolean Salah Bendera untuk menghilangkan peristiwa yang tidak memiliki data klik yang berguna.

IValueCallback

Nama Tipe Default Deskripsi
pageName Function Null Fungsi untuk mengambil alih perilaku penangkapan default pageName .
pageActionPageTags Function Null Fungsi panggilan balik untuk menambah default pageTags yang pageAction dikumpulkan selama peristiwa.
contentName Function Null Fungsi panggilan balik untuk mengisi yang dikustomisasi contentName.

ICustomDataTags

Nama Tipe Default Tag default untuk digunakan dalam HTML Deskripsi
useDefaultContentNameOrId Boolean Salah T/A Jika true, mengumpulkan atribut id HTML standar saat contentName 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 Null T/A Nama dan konten elemen meta Kepala HTML tangkap otomatis dengan awalan yang disediakan saat diambil. Misalnya, custom- dapat digunakan dalam tag meta HTML.
captureAllMetaDataContent Boolean Salah T/A Otomatis mengambil semua nama dan konten elemen meta HTML Head. Defaultnya adalah false. Jika diaktifkan, ini akan mengambil alih yang disediakan metaDataPrefix.
parentDataTag String Null T/A parentId Mengambil dalam log saat data-parentid atau data-*-parentid tidak ditemui. Untuk efisiensi, berhenti melintas dom untuk mengambil nama konten dan nilai elemen saat data-{parentDataTag} atau customDataPrefix-{parentDataTag} atribut ditemui. Untuk informasi selengkapnya, lihat kunci parentId.
dntDataTag String ai-dnt data-ai-dnt Plug-in untuk menangkap data telemetri mengabaikan elemen HTML dengan atribut ini.

behaviorValidator

Fungsi secara behaviorValidator otomatis memeriksa apakah perilaku 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.
BehaviorMapValidator 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.

Meneruskan nilai string vs. numerik

Untuk mengurangi byte yang Anda lewati, teruskan nilai angka alih-alih string teks lengkap. Jika biaya bukan masalah, Anda dapat meneruskan string teks lengkap (misalnya NAVIGATIONBACK).

Sampel penggunaan dengan behaviorValidator

Berikut adalah contoh tampilan validator peta perilaku. Anda bisa terlihat berbeda, tergantung pada taksonomi organisasi Anda dan peristiwa 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 sampel

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

parentId Contoh kunci

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 lainnya 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 yang data-group="buttongroup1" ditentukan, plug-in menemukan lebih parentId 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