Habilitar complemento Click Analytics Auto-Collection

Artículo
10/15/2024

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

Script del cargador del SDK de JavaScript (Web)
Paquete npm

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

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

Instale el paquete npm:

npm install --save @microsoft/applicationinsights-clickanalytics-js @microsoft/applicationinsights-web


import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ClickAnalyticsPlugin } from '@microsoft/applicationinsights-clickanalytics-js';

const clickPluginInstance = new ClickAnalyticsPlugin();
// Click Analytics configuration
const clickPluginConfig = {
  autoCapture: true
};
// Application Insights Configuration
const configObj = {
  connectionString: "YOUR_CONNECTION_STRING", 
  // Alternatively, you can pass in the instrumentation key,
  // but support for instrumentation key ingestion will end on March 31, 2025.  
  // instrumentationKey: "YOUR INSTRUMENTATION KEY",
  extensions: [clickPluginInstance],
  extensionConfig: {
    [clickPluginInstance.identifier]: clickPluginConfig
  },
};

const appInsights = new ApplicationInsights({ config: configObj });
appInsights.loadAppInsights();

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:

Si customDataPrefix no se declara en la configuración avanzada, el valor id proporcionado en data-id se usa como nombre de customEvent.
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.
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.
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 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 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

Confirme que los datos fluyen.
Consulte la documentación sobre el uso del libro HEART para el análisis de productos expandido.
Consulte el repositorio de GitHub y el paquete npm para el complemento Autocollection de Click Analytics.
Use el análisis de eventos en la experiencia de uso para analizar los principales clics y segmentarlos por dimensiones disponibles.
Consulte Log Analytics si no conoce el proces de escritura de una consulta.
Cree un libro o exporte a Power BI para crear visualizaciones personalizadas de los datos de clics.

Compartir a través de

Habilitar complemento Click Analytics Auto-Collection

Requisitos previos

¿Qué datos recopilará el complemento?

Propiedades de eventos personalizados

Dimensiones personalizadas

Medidas personalizadas

Agregar el complemento Click Analytics

Agregar el código

(opcional) Establecer el contexto de usuario autenticado

Uso del complemento

Almacenamiento de datos de telemetría

`name`

`contentName`

Clave `parentId`

`customDataPrefix`

Agregar configuración avanzada

IValueCallback

ICustomDataTags

behaviorValidator

Funciones de devolución de llamada

Pasar una cadena frente a pasar valores numéricos

Ejemplo de uso con behaviorValidator

Aplicación de ejemplo

Ejemplos de clave `parentId`

Ejemplo 1

Ejemplo 2

Ejemplo 3

Solución de problemas

Pasos siguientes

Comentarios

Recursos adicionales

Compartir a través de

Habilitar complemento Click Analytics Auto-Collection

Requisitos previos

¿Qué datos recopilará el complemento?

Propiedades de eventos personalizados

Dimensiones personalizadas

Medidas personalizadas

Agregar el complemento Click Analytics

Agregar el código

(opcional) Establecer el contexto de usuario autenticado

Uso del complemento

Almacenamiento de datos de telemetría

name

contentName

Clave parentId

customDataPrefix

Agregar configuración avanzada

IValueCallback

ICustomDataTags

behaviorValidator

Funciones de devolución de llamada

Pasar una cadena frente a pasar valores numéricos

Ejemplo de uso con behaviorValidator

Aplicación de ejemplo

Ejemplos de clave parentId

Ejemplo 1

Ejemplo 2

Ejemplo 3

Solución de problemas

Pasos siguientes

Comentarios

Recursos adicionales

`name`

`contentName`

Clave `parentId`

`customDataPrefix`

Ejemplos de clave `parentId`