Habilitar complemento Click Analytics Auto-Collection

  • Artículo

Las extensiones de características del SDK de JavaScript de Application Insights son características adicionales que se pueden agregar al SDK de JavaScript de Application Insights para mejorar su funcionalidad.

En este artículo, discutiremos sobre el complemento Click Analytics, el cual realiza un seguimiento automático de los eventos de clic en las páginas web y usa atributos data-* o etiquetas personalizadas en elementos HTML para rellenar la telemetría de eventos.

Requisitos previos

Instale el SDK de JavaScript antes de activar el complemento Click Analytics.

¿Qué datos recopilará el complemento?

Se capturarán las propiedades clave siguientes de forma predeterminada cuando el complemento esté habilitado.

Propiedades de eventos personalizados

Nombre Descripción Ejemplo
Nombre Nombre del evento personalizado. Para obtener más información sobre cómo se rellena un nombre, consulte Columna de nombre. Acerca de
itemType Tipo de evento. customEvent
sdkVersion Versión del SDK de Application Insights junto con el complemento de clic. JavaScript:2_ClickPlugin2

Dimensiones personalizadas

Nombre Descripción Ejemplo
actionType Tipo de acción que produjo el evento de clic. Puede ser un clic izquierdo o derecho. CL
baseTypeSource Origen del tipo base del evento personalizado. ClickEvent
clickCoordinates Coordenadas donde se desencadena el evento de clic. 659X47
contenido Marcador de posición para almacenar atributos y valores data-* adicionales. [{sample1:value1, sample2:value2}]
pageName Título de la página donde se desencadena el evento de clic. Título de ejemplo
parentId Identificador o nombre del elemento principal. Para más información sobre cómo se rellena un parentId, consulte clave parentId. navbarContainer

Medidas personalizadas

Nombre Descripción Ejemplo
timeToAction Tiempo que el usuario necesitó en milisegundos para hacer clic en el elemento desde la carga de la página inicial. 87407

Agregar el complemento Click Analytics

Los usuarios pueden configurar el complemento de recopilación automática de Click Analytics mediante el script del cargador del SDK de JavaScript (Web) o npm y, de manera opcional, agregar una extensión de marco.

Nota

El 31 de marzo de 2025 finalizará la compatibilidad con la ingesta de claves de instrumentación. La ingesta de claves de instrumentación seguirá funcionando, pero la característica ya no recibirá actualizaciones ni soporte técnico. Transición a las cadenas de conexión para aprovechar las nuevas funcionalidades.

Agregar el código

  1. Pegue el script del cargador del SDK de JavaScript (Web) en la parte superior de cada página para la que desea habilitar 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. Para agregar o actualizar la configuración del script del cargador del SDK de JavaScript (Web), consulte Configuración del script del cargador del SDK de JavaScript (Web).

Sugerencia

Si desea agregar una extensión de marco o ya ha agregado una, consulte los ejemplos de código de React, React Native y Angular para saber cómo agregar el complemento Click Analytics.

(opcional) Establecer el contexto de usuario autenticado

Si desea establecer esta configuración opcional, consulte Establecer el contexto de usuario autenticado.

Si usa un libro HEART con el complemento Click Analytics, no es necesario establecer el contexto de usuario autenticado para ver los datos de telemetría. Para obtener más información, consulte la documentación del libro HEART.

Uso del complemento

Las secciones siguientes describen cómo usar el complemento.

Almacenamiento de datos de telemetría

Los datos de telemetría que se generan en los eventos de clic se almacenan como customEvents en la sección Azure Portal > Application Insights> Registros.

name

La columna name del customEvent se rellena en función de las siguiente reglas:

  1. Si customDataPrefix no se declara en la configuración avanzada, el valor id proporcionado en data-id se usa como nombre de customEvent.
  2. Si se declara customDataPrefix, el valor id proporcionado en data-*-id, que significa que debe comenzar con data y terminar con id, se usa como el nombre de customEvent. Por ejemplo, si el elemento HTML en el que se hizo clic tiene el atributo "data-sample-id"="button1", entonces "button1" será el nombre de customEvent.
  3. Si no existe el atributo data-id o data-*-id, y useDefaultContentNameOrId está establecido en true, como nombre de customEvent se usa el atributo HTML id del elemento en el que se ha hecho clic o el nombre de contenido del elemento. Si tanto el valor de id como el nombre de contenido estuvieran presentes, se dará prioridad a id.
  4. Si useDefaultContentNameOrId es false, el nombre de customEvent es "not_specified". Se recomienda establecer useDefaultContentNameOrId en true para generar datos significativos.

contentName

Si ha definido la función de devolución de llamada contentName en la configuración avanzada, la columna contentName de customEvent se rellena en función de las reglas siguientes:

  • Para un elemento HTML <a> en el que se ha hecho clic, el complemento intenta recopilar el valor de su atributo innerText (texto). Si el complemento no encuentra este atributo, intenta recopilar el valor de su atributo innerHtml.

  • Para un elemento HTML <img> o <area> en el que se ha hecho clic, el complemento recopila el valor de su atributo alt.

  • Para todos los demás elementos HTML en los que se ha hecho clic, contentName se rellena en función de las reglas siguientes, que se enumeran en orden de prioridad:

    1. Valor del atributo value para el elemento
    2. Valor del atributo name para el elemento
    3. Valor del atributo alt para el elemento
    4. Valor del atributo innerText para el elemento
    5. Valor del atributo id para el elemento

Clave parentId

Para rellenar la clave parentId dentro de customDimensions de la tabla customEvent de los registros, declare la etiqueta parentDataTag o defina el atributo data-parentid.

El valor de parentId se captura en función de las reglas siguientes:

  • Al declarar parentDataTag, el complemento captura el valor de id o data-*-id definido dentro del elemento más cercano al elemento en el que se hace clic como parentId.
  • Si data-*-id y id están definidos, se da prioridad a data-*-id.
  • Si parentDataTag se define, pero el complemento no puede encontrar esta etiqueta en el árbol DOM, el complemento usa id o data-*-id, que se define dentro del elemento más cercano al elemento al que se hace clic como parentId. Sin embargo, se recomienda definir el atributo data-{parentDataTag} o customDataPrefix-{parentDataTag} para reducir el número de bucles necesarios para buscar parentId. Declarar parentDataTag es útil cuando es necesario usar el complemento con opciones personalizadas.
  • Si no se define parentDataTag y no se incluye la información de parentId en el elemento actual, no se recopila ningún valor parentId.
  • Si parentDataTag se define, useDefaultContentNameOrId se establece en false, y solo se define un atributo id dentro del elemento más cercano al elemento en el que se hace clic. El objeto parentId se rellena como "not_specified". Para capturar el valor de id, establezca useDefaultContentNameOrId en true.

Al definir el atributo data-parentid o data-*-parentid, el complemento captura la instancia de este atributo más cercana al elemento en el que se hace clic, incluido dentro del elemento en el que se ha hecho clic, si procede.

Si declara parentDataTag y define el atributo data-parentid o data-*-parentid, se da prioridad a data-parentid o data-*-parentid.

Si aparece la advertencia de telemetría «Hacer clic en filas de eventos sin ningún valor parentId», consulte Corregir la advertencia «Hacer clic en filas de eventos sin ningún valor parentId».

Para ver ejemplos que muestran qué valor se captura como parentId para las diferentes configuraciones, consulte Ejemplos de clave parentid.

Precaución

  • Una vez que parentDataTag se incluye en cualquier elemento HTML de la aplicación , el SDK comienza a buscar etiquetas principales en toda la aplicación y no solo el elemento HTML donde se usó.
  • Si usa el libro de HEART con el complemento de Click Analytics, para que los eventos de HEART se registren o detecten, la etiqueta parentDataTag debe declararse en todas las demás partes de la aplicación de un usuario final.

customDataPrefix

La opción customDataPrefix en la configuración avanzada proporciona al usuario la capacidad de configurar un prefijo de atributo de datos para ayudar a identificar dónde se encuentra el corazón dentro del código base del individuo. El prefijo siempre debe estar en minúsculas y empezar por data-. Por ejemplo:

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

En HTML, los atributos globales de data-* forman una clase de atributos denominados atributos de datos personalizados, que permiten intercambiar información propietaria entre el código HTML y su representación DOM mediante scripts. Los navegadores más antiguos, como Internet Explorer y Safari, descartarán atributos que no entiendan, a menos que comiencen por data-.

El asterisco (*) en data-* se puede reemplazar por cualquier nombre que siga la regla de producción de nombres XML, aunque existen las siguientes restricciones.

  • El nombre no deberá empezar por "xml", sin importar si se usan mayúsculas o minúsculas.
  • El nombre no deberá contener signos de punto y coma (U+003A).
  • El nombre no debe contener mayúsculas.

Agregar configuración avanzada

Nombre Tipo Valor predeterminado Descripción
autoCapture Boolean True Configuración de captura automática.
devolución de llamada IValueCallback Null Configuración de las devoluciones de llamada.
pageTags Objeto Null Etiquetas de página.
dataTags ICustomDataTags Null Etiquetas de datos personalizadas que se proporcionan para invalidar las etiquetas predeterminadas que se usan para capturar datos de clic.
urlCollectHash Boolean False Habilita el registro de todos los valores que haya después de un carácter "#" de la dirección URL.
urlCollectQuery Boolean False Habilita el registro de la cadena de consulta de la dirección URL.
behaviorValidator Función Null Función de devolución de llamada que se va a usar para la validación del valor data-*-bhvr. Para obtener más información, vaya a la sección behaviorValidator.
defaultRightClickBhvr cadena (o) número '' Valor predeterminado del comportamiento cuando se haya producido un evento de clic con el botón derecho. Este valor se reemplazará si el elemento tiene el atributo data-*-bhvr.
dropInvalidEvents Boolean False Marca para eliminar todos aquellos eventos que no tengan datos de clic útiles.

IValueCallback

Nombre Tipo Valor predeterminado Descripción
pageName Función Null Función para reemplazar el comportamiento predeterminado de captura de pageName.
pageActionPageTags Función Null Función de devolución de llamada para aumentar el valor predeterminado de pageTags que se recopila en el evento pageAction.
contentName Función Null Función de devolución de llamada para rellenar el valor de contentName personalizado.

ICustomDataTags

Nombre Tipo Valor predeterminado Etiqueta predeterminada que se usará en HTML Descripción
useDefaultContentNameOrId Boolean False N/D Si es true, recopila el atributo HTML estándar id por contentName cuando un elemento determinado no esté etiquetado con el prefijo de datos personalizado o customDataPrefix. De lo contrario, no se recopila el atributo HTML estándar id por contentName.
customDataPrefix String data- data-* El nombre de contenido de captura automática y el valor de los elementos que se etiquetan con el prefijo proporcionado. Por ejemplo, data-*-id, data-<yourcustomattribute> se pueden usar en las etiquetas HTML.
aiBlobAttributeTag String ai-blob data-ai-blob El complemento admite un atributo de blob de JSON en lugar de los atributos individuales de data-*.
metaDataPrefix String Null N/D Nombre y contenido del elemento meta del encabezado HTML de captura automática con prefijo proporcionado al realizarse la captura. Por ejemplo, custom- se puede usar en la etiqueta meta HTML.
captureAllMetaDataContent Boolean False N/D Captura automática de todos los nombres y el contenido de los elementos meta del encabezado HTML. El valor predeterminado es False. Si está habilitado, invalidará el metaDataPrefix proporcionado.
parentDataTag String Null N/D Captura parentId en los registros cuando no se encuentra data-parentid o data-*-parentid. Por motivos de eficiencia, retiene el recorrido hasta llegar al DOM para capturar el nombre de contenido y el valor de los elementos cuando se encuentra el atributo data-{parentDataTag} o customDataPrefix-{parentDataTag}. Para más información, consulte clave parentId.
dntDataTag String ai-dnt data-ai-dnt El complemento para capturar datos de telemetría omite los elementos HTML con este atributo.

behaviorValidator

Las funciones behaviorValidator comprobarán automáticamente que los comportamientos etiquetados en el código se ajusten a una lista predefinida. Las funciones garantizarán que los comportamientos etiquetados sean coherentes con la taxonomía establecida de la empresa. No es necesario ni se espera que la mayoría de clientes de Azure Monitor usen estas funciones, pero están disponibles para escenarios avanzados. Las funciones behaviorValidator pueden ayudar con prácticas más accesibles.

Los comportamientos se muestran en el campo customDimensions dentro de la tabla CustomEvents.

Funciones de devolución de llamada

Tres funciones de devolución de llamada de behaviorValidator se exponen como parte de esta extensión. Si ninguna de las funciones expuestas cubriera sus necesidades, podrá usar sus propias funciones de devolución de llamada. La intención es brindar la estructura de datos de su propio comportamiento. El complemento utiliza esta función de validación mientras extrae los comportamientos de las etiquetas de datos.

Nombre Descripción
BehaviorValueValidator Esta función de devolución de llamada se usará si la estructura de datos de comportamiento es una matriz de cadenas.
BehaviorMapValidator Esta función de devolución de llamada se usará si la estructura de datos de comportamiento es un diccionario.
BehaviorEnumValidator Esta función de devolución de llamada se usará si la estructura de datos de comportamiento es una enumeración.

Pasar una cadena frente a pasar valores numéricos

Para reducir los bytes que pase, pase el valor numérico en lugar de la cadena de texto completo. Si el costo no es un problema, puede pasar la cadena de texto completo (por ejemplo, NAVIGATIONBACK).

Ejemplo de uso con behaviorValidator

Este es un ejemplo del aspecto que podría tener un validador de mapa de comportamiento. Los suyos podrían tener un aspecto diferente, en función de la taxonomía de la organización y de los eventos que recopile.

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

Aplicación de ejemplo

Consulte una aplicación web sencilla con el complemento Click Analytics Autocollection habilitado para obtener información sobre cómo implementar propiedades de eventos personalizadas, como Name y parentid, y comportamientos y contenido personalizados. Consulte el archivo Léame de la aplicación de ejemplo para obtener información sobre dónde buscar datos de clic.

Ejemplos de clave parentId

En los ejemplos siguientes, se muestra qué valor se captura como parentId para las configuraciones diferentes.

Los ejemplos muestran cómo, si parentDataTag se define pero el complemento no encuentra esta etiqueta en el árbol DOM, el complemento usa el id de su elemento primario más cercano.

Ejemplo 1

En el ejemplo 1, parentDataTag no se declara y data-parentid o data-*-parentid no se define en ningún elemento. En este ejemplo se muestra una configuración en la que no se recopila un valor para parentId.

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>

Para el elemento <Button> en el que se hace clic, el valor de parentId es “not_specified”, porque no se definen detalles de parentDataTag y no se proporciona ningún identificador de elemento primario dentro del elemento actual.

Ejemplo 2

En el ejemplo 2, parentDataTag está declarado y data-parentid está definido. En este ejemplo se muestra cómo se recopilan los detalles del identificador primario.

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>

Para el elemento <Button> en el que se hace clic, el valor de parentId es parentid2. Aunque se declara parentDataTag, data-parentid se define directamente dentro del elemento. Por lo tanto, este valor tiene prioridad sobre todos los demás identificadores primarios o detalles de identificador definidos en sus elementos primarios.

Ejemplo 3

En el ejemplo 3, parentDataTag se declara y el atributo data-parentid o data-*-parentid no está definido. En este ejemplo se muestra cómo la declaración de parentDataTag puede ser útil para recopilar un valor para parentId para casos en los que los elementos dinámicos no tienen id nidata-*-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>

Para el elemento <Button> en el que se hace clic, el valor de parentId es test6parent, porque parentDataTag se declara. Esta declaración permite que el complemento recorra el árbol de elementos actual y, por lo tanto, el identificador de su elemento primario más cercano se usará cuando los detalles del identificador primario no se proporcionen directamente dentro del elemento actual. Con data-group="buttongroup1" definido, el complemento encuentra parentId de forma más eficaz.

Si quita el atributo data-group="buttongroup1", el valor de parentId sigue siendo test6parent porque parentDataTag todavía se declara.

Solución de problemas

Consulte el artículo de solución de problemas dedicado.

Pasos siguientes