Activer le plug-in Click Analytics Auto-collection

  • Article

Les extensions de fonctionnalités du Kit de développement logiciel (SDK) JavaScript Application Insights sont des fonctionnalités supplémentaires qui peuvent être ajoutées au Kit de développement logiciel (SDK) JavaScript Application Insights pour améliorer ses fonctionnalités.

Dans cet article, nous abordons le plug-in Click Analytics qui suit automatiquement les événements de clic sur les pages web et utilise des attributs data-*ou étiquettes personnalisées dans les éléments HTML pour remplir les données de télémétrie des événements.

Prérequis

Installer le kit de développement logiciel (SDK) JavaScript avant l’activation du plug-in Click Analytics.

Quelles données le plug-in collecte-t-il ?

Les propriétés principales ci-dessous sont capturées par défaut lorsque le plug-in est activé.

Propriétés d’événements personnalisés

Nom Description Exemple
Name Nom de l'événement personnalisé. Pour plus d’informations sur la façon dont un nom est rempli, consultez Colonne de nom. À propos de
itemType Type d’événement. customEvent
sdkVersion Version du Kit de développement logiciel (SDK) Application Insights avec le plug-in Click. JavaScript:2_ClickPlugin2

Dimensions personnalisées

Nom Description Exemple
actionType Type d’action qui a provoqué l’événement de clic. Il peut s’agir d’un clic gauche ou droit. CL
baseTypeSource Source du type de base de l’événement personnalisé. ClickEvent
clickCoordinates Coordonnées où l’événement de clic est déclenché. 659X47
contenu Espace réservé pour stocker des attributs et des valeurs data-* supplémentaires. [{sample1:value1, sample2:value2}]
pageName Titre de la page où l’événement de clic est déclenché. Exemple de titre
parentId ID ou nom de l’élément parent. Pour plus d’informations sur la façon dont un parentId est rempli, consultez clé parentId. navbarContainer

Mesures personnalisées

Nom Description Exemple
timeToAction Temps en millisecondes pris par l’utilisateur pour cliquer sur l’élément depuis le chargement initial de la page. 87407

Ajouter le plug-in Click Analytics

Les utilisateurs peuvent configurer le plug-in Click Analytics Auto-Collection via le script de loader du Kit de développement logiciel (SDK) JavaScript ou npm, puis éventuellement ajouter une extension de framework.

Notes

Le support de l’ingestion de clé d’instrumentation prendra fin le 31 mars 2025. L’ingestion de clé d’instrumentation continuera de fonctionner, mais nous ne fournirons plus de mises à jour ni de support pour la fonctionnalité. Passez aux chaînes de connexion pour tirer parti des nouvelles fonctionnalités.

Ajouter le code

  1. Collez le script de chargement du SDK JavaScript (web) en haut de chaque page pour laquelle vous souhaitez activer 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. Pour ajouter ou mettre à jour la configuration du script de loader du Kit de développement logiciel (SDK) JavaScript (web), voir Configuration du script du loader SDK (web) JavaScript.

Conseil

Si vous souhaitez ajouter une extension de framework ou si vous en avez déjà ajouté une, consultez les exemples de code React, React Native et Angular pour savoir comment ajouter le plug-in Click Analytics.

(Facultatif) Définir le contexte de l’utilisateur authentifié

Si vous devez définir ce paramètre facultatif, consultez Définir le contexte utilisateur authentifié.

Si vous utilisez un classeur HEART avec le plug-in Click Analytics, vous n’avez pas besoin de définir le contexte utilisateur authentifié pour afficher les données de télémétrie. Pour plus d’informations, consultez la documentation du classeur HEART.

Utiliser le plug-in

Les sections suivantes décrivent comment utiliser le plug-in.

Stockage des données de télémétrie

Les données de télémétrie générées à partir des événements de clic sont stockées en tant que customEvents dans la section Journaux d’> Application Insights > du portail Azure.

name

La colonne name du customEvent est remplie en fonction des règles suivantes :

  1. Si customDataPrefix n’est pas déclaré dans la configuration avancée, le id fourni dans le data-id est utilisé comme nom de customEvent.
  2. Si customDataPrefix est déclaré, le id fourni dans le data-*-id, ce qui signifie qu’il doit commencer par data et se terminer par id, est utilisé comme nom de customEvent. Par exemple, si l’élément HTML cliqué a l’attribut "data-sample-id"="button1", "button1" est le nom de customEvent.
  3. Si l’attribut data-id ou data-*-id n’existe pas et si useDefaultContentNameOrId est défini sur true, l’attribut HTML id de l’élément cliqué ou le nom de contenu de l’élément cliqué est utilisé comme nom de customEvent. Si id et le nom de contenu sont tous deux présents, la priorité est donnée à id.
  4. Si useDefaultContentNameOrId a la valeur false, le nom de customEvent est "not_specified". Nous recommandons de définir l’attribut useDefaultContentNameOrId sur la valeur true pour générer des données significatives.

contentName

Si la fonction de rappel contentName est définie dans la configuration avancée, la colonne contentName du customEvent est remplie en fonction des règles suivantes :

  • Pour un élément HTML <a> cliqué, le plug-in tente de collecter la valeur de son attribut innerText (texte). Si le plug-in ne trouve pas cet attribut, il tente de collecter la valeur de son attribut innerHtml.

  • Pour un élément HTML <img> ou <area> cliqué, le plug-in collecte la valeur de son attribut alt.

  • Pour tous les autres éléments HTML cliqués, contentName est rempli en fonction des règles suivantes, qui sont répertoriées dans l’ordre de priorité :

    1. Valeur de l’attribut value pour l’élément
    2. Valeur de l’attribut name pour l’élément
    3. Valeur de l’attribut alt pour l’élément
    4. Valeur de l’attribut innerText pour l’élément
    5. Valeur de l’attribut id pour l’élément

Clé parentId

Pour renseigner la clé parentId dans customDimensions de la table customEvent dans les journaux, déclarez la balise parentDataTag ou définissez l’attribut data-parentid.

La valeur pour parentId est extraite en fonction des règles suivantes :

  • Lorsque vous déclarez le parentDataTag, le plug-in extrait la valeur de id ou data-*-id définie dans l’élément le plus proche de l’élément cliqué en tant que parentId.
  • Si data-*-id et id sont tous deux définis, la priorité est donné à data-*-id.
  • Si parentDataTag est défini, mais que le plug-in ne trouve pas cette balise sous l’arborescence DOM, le plug-in utilise id ou data-*-id défini dans l’élément le plus proche de l’élément cliqué en tant que parentId. Toutefois, nous vous recommandons de définir l’attribut data-{parentDataTag} ou customDataPrefix-{parentDataTag} pour réduire le nombre de boucles nécessaires pour trouver parentId. La déclaration de parentDataTag est utile lorsque vous devez utiliser le plug-in avec des options personnalisées.
  • Si aucun parentDataTag n’est défini et qu’aucune information parentId n’est incluse dans l’élément actuel, aucune valeur parentId n’est collectée.
  • Si parentDataTag est défini, que useDefaultContentNameOrId est défini sur false, et que seul un attribut id est défini dans l’élément le plus proche de l’élément cliqué, le parentId remplit comme "not_specified". Pour extraire la valeur de id, définissez useDefaultContentNameOrId sur true.

Lorsque vous définissez l’attribut data-parentid oudata-*-parentid, le plug-in extrait le instance de cet attribut qui est le plus proche de l’élément cliqué, y compris dans l’élément cliqué, le cas échéant.

Si vous déclarez parentDataTag et définissez l’attribut data-parentid ou data-*-parentid, la priorité est donnée à data-parentid ou data-*-parentid.

Si l’avertissement de télémétrie « Lignes de l'événement de clic sans valeur parentId » s’affiche, consultez Correction de l’avertissement « Lignes de l'événement de clic sans valeur parentId ».

Pour obtenir des exemples montrant quelle valeur est extraite en tant que parentId pour différentes configurations, consultez Exemples de cléparentid.

Attention

  • Une fois parentDataTag qu’il est inclus dans n’importe quel élément HTML de votre application , le SDK commence à rechercher des balises parents dans l’ensemble de votre application et pas seulement l’élément HTML dans lequel vous l’avez utilisé.
  • Si vous utilisez le classeur HEART avec le plug-in Click Analytics, l’étiquette parentDataTag doit être déclarée dans toutes les autres parties de l’application d’un utilisateur final pour que les événements HEART soient enregistrés ou détectés.

customDataPrefix

L’option customDataPrefix dans la configuration avancée permet à l’utilisateur de configurer un préfixe d’attribut de données pour aider à identifier l’emplacement du cœur dans le codebase de l’individu. Le préfixe doit toujours être minuscule et commencer par data-. Par exemple :

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

En HTML, les data-* attributs généraux sont appelés attributs de données personnalisés qui permettent l’échange d’informations privées entre le code HTML et sa représentation DOM par des scripts. Les navigateurs plus anciens tels qu’Internet Explorer et Safari suppriment les attributs qu’ils ne comprennent pas, sauf s’ils commencent par data-.

Vous pouvez remplacer l’astérisque (*) dans data-* par n’importe quel nom qui suit la règle de production des noms XML avec les restrictions suivantes.

  • Le nom ne doit pas commencer par « xml », quelle que soit la casse utilisée pour ces lettres.
  • Le nom ne doit pas contenir de point-virgule (U + 003A).
  • Le nom ne doit pas contenir de lettres majuscules.

Ajouter une configuration avancée

Nom Type Default Description
autoCapture Booléen True Configuration de capture automatique.
rappel IValueCallback Null Configuration des rappels.
pageTags Object Null Balises de page.
dataTags ICustomDataTags Null Balises de données personnalisées fournies pour remplacer les balises par défaut utilisées pour capturer les données de clic.
urlCollectHash Boolean False Active la journalisation des données après un caractère « # » de l’URL.
urlCollectQuery Boolean False Active la journalisation de la chaîne de requête de l’URL.
behaviorValidator Fonction Null Fonction de rappel à utiliser pour la validation de la valeur data-*-bhvr. Pour plus d’informations, consultez la section behaviorValidator.
defaultRightClickBhvr Chaîne (ou) nombre '' Valeur de comportement par défaut quand un événement de clic droit s’est produit. Cette valeur est remplacée si l’élément a l’attribut data-*-bhvr.
dropInvalidEvents Boolean False Indicateur permettant de supprimer les événements qui ne contiennent pas de données de clics utiles.

IValueCallback

Nom Type Default Description
pageName Fonction Null Fonction permettant de remplacer le comportement de capture pageName par défaut.
pageActionPageTags Fonction Null Fonction de rappel permettant d’augmenter les attributs pageTags par défaut collectés pendant l’événement pageAction.
contentName Fonction Null Fonction de rappel permettant de remplir un attribut contentName personnalisé.

ICustomDataTags

Nom Type Default Balise par défaut à utiliser en HTML Description
useDefaultContentNameOrId Boolean False N/A Si true, collecte l’attribut id HTML standard pour contentName lorsqu’un élément particulier n’est pas marqué avec le préfixe de données par défaut ou customDataPrefix. Sinon, l’attribut HTML standard id pour contentName n’est pas collecté.
customDataPrefix String data- data-* Capture automatique du contenu et de la valeur des éléments balisés avec le préfixe fourni. Par exemple, data-*-id, data-<yourcustomattribute> peut être utilisé dans les balises HTML.
aiBlobAttributeTag String ai-blob data-ai-blob Le plug-in prend en charge un attribut blob JSON plutôt que des attributs data-* individuels.
metaDataPrefix Chaîne Null N/A Capture automatique du contenu et du nom de l’élément méta de l’en-tête HTML avec le préfixe fourni. Par exemple, custom- peut être utilisé dans la balise méta HTML.
captureAllMetaDataContent Boolean False N/A Capture automatique de tous les noms et de tout le contenu de l’élément méta de l’en-tête HTML. La valeur par défaut est false. S’il est activé, il remplace l’attribut metaDataPrefix fourni.
parentDataTag Chaîne Null N/A Extrait le parentId dans les journaux lorsque data-parentid ou data-*-parentid n’est pas rencontré. Par souci d’efficacité, cesse de parcourir le DOM pour capturer le nom et la valeur du contenu des éléments quand l’attribut data-{parentDataTag} ou customDataPrefix-{parentDataTag} est rencontré. Pour plus d’informations, consultez clé parentId.
dntDataTag String ai-dnt data-ai-dnt Le plug-in pour capturer les données de télémétrie ignore les éléments HTML avec cet attribut.

behaviorValidator

Les fonctions behaviorValidator vérifient automatiquement que les comportements balisés dans le code respectent une liste prédéfinie. Ces fonctions garantissent la cohérence des comportements balisés avec la taxonomie établie par votre entreprise. Il n’est pas obligatoire ou attendu que la plupart des clients d’Azure Monitor utilisent ces fonctions, mais elles sont disponibles pour des scénarios avancés. Les fonctions behaviorValidator peuvent vous aider avec des pratiques plus accessibles.

Les comportements s’affichent dans le champ customDimensions dans la table CustomEvents.

Fonctions de rappel

Trois fonctions de rappel behaviorValidator différentes sont exposées dans le cadre de cette extension. Vous pouvez également utiliser vos propres fonctions de rappel si les fonctions exposées ne correspondent pas à vos exigences. L’objectif est d’apporter la structure de données de votre propre comportement. Le plug-in utilise cette fonction de validateur lors de l’extraction des comportements des balises de données.

Nom Description
BehaviorValueValidator Utilisez cette fonction de rappel si la structure de données de votre comportement est un tableau de chaînes.
BehaviorMapValidator Utilisez cette fonction de rappel si la structure de données de votre comportement est un dictionnaire.
BehaviorEnumValidator Utilisez cette fonction de rappel si la structure de données de votre comportement est une énumération.

Transmission de valeurs chaîne et numériques

Pour réduire les octets que vous passez, transmettez la valeur numérique au lieu de la chaîne de texte intégral. Si le coût n’est pas un problème, vous pouvez passer dans la chaîne de texte intégral (par exemple, NAVIGATIONBACK).

Exemple d’utilisation avec behaviorValidator

Voici un exemple de ce à quoi peut ressembler un validateur de carte de comportement. La vôtre peut être différente, selon la taxonomie de votre organisation et les événements que vous collectez.

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

Exemple d'application

Consultez une application web simple avec le plug-in Click Analytics Autocollection activé pour savoir comment implémenter des propriétés d’événement personnalisées telles que Name et parentid, ainsi que le comportement et le contenu personnalisés. Consultez l’exemple de fichier readme d’application pour obtenir plus d’informations sur l’emplacement de recherche des données de clic.

Exemples de clé parentId

Les exemples suivants montrent quelle valeur est extraite en tant que parentId pour différentes configurations.

Les exemples montrent comment, si parentDataTag est défini, mais que le plug-in ne trouve pas cette balise sous l’arborescence DOM, le plug-in utilise le id de son élément parent le plus proche.

Exemple 1

Dans l’exemple 1, le parentDataTag n’est pas déclaré et data-parentid ou data-*-parentid n’est défini dans aucun élément. Cet exemple montre une configuration où une valeur pour parentId n’est pas collectée.

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>

Pour l’élément cliqué <Button>, la valeur de parentId est “not_specified”, car aucun détail parentDataTag n’est défini et aucun ID d’élément parent n’est fourni dans l’élément actuel.

Exemple 2

Dans l’exemple 2, parentDataTag est déclaré et data-parentid est défini. Cet exemple montre comment les détails de l’ID parent sont collectés.

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>

Pour l’élément cliqué <Button>, la valeur de parentId est parentid2. Même si parentDataTag est déclaré, le data-parentid est directement défini dans l’élément. Par conséquent, cette valeur est prioritaire sur tous les autres ID parent ou détails d’ID définis dans ses éléments parent.

Exemple 3

Dans l’exemple 3, parentDataTag est déclaré et l’attribut data-parentid ou data-*-parentid n’est pas défini. Cet exemple montre comment déclarer parentDataTag peut être utile pour collecter une valeur pour parentId dans les cas où les éléments dynamiques n’ont pas de id ou 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>

Pour l’élément cliqué <Button>, la valeur de parentId est test6parent, car parentDataTag est déclaré. Cette déclaration permet au plug-in de parcourir l’arborescence d’éléments actuelle. Par conséquent, l’ID de son parent le plus proche est utilisé lorsque les détails de l’ID parent ne sont pas fournis directement dans l’élément actuel. Étant donné que data-group="buttongroup1" est défini, le plug-in trouve le parentId plus efficacement.

Si vous supprimez l’attribut data-group="buttongroup1", la valeur de parentId est toujours test6parent, car parentDataTag est toujours déclarée.

Résolution des problèmes

Consultez l’article sur la résolution des problèmes dédié.

Étapes suivantes