クリック分析自動収集プラグインを有効にする

Application Insights JavaScript SDK 拡張機能は、Application Insights JavaScript SDK に追加して機能を強化できる追加の機能です。

この記事では、Web ページ上のクリック イベントを自動的に追跡し、HTML 要素で data-* 属性またはカスタム タグを使用してイベント テレメトリを設定する、Click Analytics プラグインについて説明します。

前提条件

Click Analytics プラグインを有効にする前に、JavaScript SDK をインストールします。

このプラグインで収集されるデータ

プラグインが有効になっている場合、次の主要なプロパティが既定でキャプチャされます。

カスタム イベントのプロパティ

カスタム ディメンション

カスタム測定値

クリック分析プラグインを追加する

ユーザーは、JavaScript (Web) SDK ローダー スクリプトまたは npm を使用してクリック分析自動収集プラグインを設定し、必要に応じてフレームワーク拡張機能を追加できます。

コードを追加する

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

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

(省略可能) 認証ユーザー コンテキストを設定する

この省略可能な設定を設定する場合は、認証ユーザー コンテキストの設定に関するページを参照してください。

Click Analytics プラグインで HEART ブックを使用している場合は、テレメトリ データを表示するために認証されたユーザー コンテキストを設定する必要はありません。 詳細については、HEART ワークブックのドキュメントを参照してください。

プラグインを使用する

以下のセクションで、このプラグインを使用する方法について説明します。

テレメトリ データのストレージ

クリック イベントから生成されたテレメトリ データは、Azure portal customEvents [Application Insights] > [ログ] セクションに、> として格納されます。

name

name の customEvent 列は、次の規則に基づいて設定されます。

1. customDataPrefix が高度な構成で宣言されていない場合は、id で指定された data-id が customEvent 名として使用されます。
2. customDataPrefix が宣言されている場合は、(つまり、id で始まり、data-*-id で終わる必要がある) data で指定された id が、customEvent 名として使用されます。 たとえば、クリックされた HTML 要素に属性 "data-sample-id"="button1" が含まれている場合は、"button1" が customEvent 名になります。
3. data-id または data-*-id 属性が存在せず、useDefaultContentNameOrId が true に設定されている場合は、クリックされた要素の HTML 属性 id またはその要素のコンテンツ名が customEvent 名として使用されます。 id とコンテンツ名の両方がある場合、id が優先されます。
4. useDefaultContentNameOrId が false の場合、customEvent 名は "not_specified" です。 意味のあるデータを生成するには、useDefaultContentNameOrId を true に設定することをお勧めします。

contentName

高度な構成で contentNameコールバック関数が定義されている場合、contentName の customEvent 列は次の規則に基づいて設定されます。

• クリックされた HTML <a> 要素の場合、プラグインは innerText (text) 属性の値の収集を試みます。 プラグインがこの属性を見つけられない場合は、その innerHtml 属性の値の収集を試みます。

• クリックされた HTML <img> または <area> 要素の場合、プラグインはその alt 属性の値を収集します。

• クリックされたその他のすべての HTML 要素について、contentName は、優先順位の順に一覧表示される、次の規則に基づいて設定されます。

  1. 要素の value 属性の値
  2. 要素の name 属性の値
  3. 要素の alt 属性の値
  4. 要素の innerText 属性の値
  5. 要素の id 属性の値

parentId キー

ログの parentId テーブルにおける customDimensions 内の customEvent キーを設定するには、タグ parentDataTag を宣言するか、data-parentid 属性を定義します。

parentId の値は、以下の規則に基づいてフェッチされます。

• parentDataTag を宣言した場合、プラグインは、id として、クリックされた要素に最も近い要素内に定義されている data-*-id または parentId の値をフェッチします。
• data-*-id と id の両方が定義されている場合は、data-*-id が優先されます。
• parentDataTag が定義されているが、プラグインが DOM ツリーでこのタグを見つけることができない場合、プラグインは、id として、クリックされた要素に最も近い要素内に定義されている data-*-id または parentId を使用します。 ただし、data-{parentDataTag} を見つけるために必要なループの数を減らすために、customDataPrefix-{parentDataTag} または parentId 属性を定義することをお勧めします。 parentDataTag の宣言は、カスタマイズされたオプションとともにプラグインを使用する必要がある場合に役立ちます。
• parentDataTag が定義されておらず、parentId 情報が現在の要素に含まれない場合、parentId 値は収集されません。
• parentDataTag が定義され、useDefaultContentNameOrId が false に設定され、クリックされた要素に最も近い要素内に id 属性のみが定義されている場合、parentId は "not_specified" として設定されます。 id の値をフェッチするするには、useDefaultContentNameOrId を true に設定します。

data-parentid または data-*-parentid 属性を定義した場合、プラグインは、クリックされた要素に最も近いその属性のインスタンス (クリックされた要素内にある場合も含む) をフェッチします。

parentDataTag を宣言し、data-parentid または data-*-parentid 属性を定義した場合は、data-parentid または data-*-parentid が優先されます。

"parentId 値のないイベント行をクリックする" テレメトリの警告が表示された場合は、「"parentId 値のないイベント行をクリックする" という警告を修正する」を参照してください。

さまざまな構成で parentId としてフェッチされる値を示す例については、「parentid キーの例」を参照してください。

customDataPrefix

高度な構成の customDataPrefix オプションを使用すると、ユーザーは、個人のコードベース内で Heart が配置されている場所を特定するのに役立つデータ属性プレフィックスを構成できます。 プレフィックスは、常に小文字にし、data- で始める必要があります。 次に例を示します。

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

HTML では、data-* グローバル属性によって、カスタム データ属性が形成されます。これにより、HTML と、スクリプトによるその DOM 表現の間で機密情報を交換できるようになります。 Internet Explorer や Safari などの以前のブラウザーでは、data- で始まっている場合を除き、認識できない属性が削除されます。

* のアスタリスク (data-*) は、XML 名の生成規則に従った任意の名前で置き換えることができます。ただし、次の制限があります。

• 大文字と小文字の区別を問わず、この名前を "xml" で始めることはできません。
• この名前にセミコロン (U+003A) を含めることはできません。
• この名前に大文字を含めることはできません。

高度な構成を追加する

IValueCallback

ICustomDataTags

behaviorValidator

behaviorValidator 関数を使用すると、コード内のタグ付けされた動作が、事前に定義された一覧に準拠しているかどうかを自動的に確認できます。 この関数を使用すると、タグ付けされた動作を、企業が設定した分類と確実に一致させることができます。 Azure Monitor のほとんどの顧客がこれらの関数を使用することは求められておらず、それは予測されていませんが、これらは高度なシナリオに使用できます。 behaviorValidator 関数は、よりアクセスしやすい手法で役立ちます。

動作は、CustomEvents テーブル内の customDimensions フィールドに示されます。

コールバック関数

この拡張機能の一部として、3 つの異なる behaviorValidator コールバック関数が公開されています。 公開された関数で要件が解決しない場合は、独自のコールバック関数を使用することもできます。 その意図はユーザー独自の動作のデータ構造を定義することです。 このプラグインでは、データ タグから動作を抽出するときにこの検証関数を使用します。

文字列または数値で渡す

渡すバイトを減らすには、フルテキスト文字列ではなく数値で渡します。 コストが問題でない場合は、フルテキスト文字列 (NAVIGATIONBACK など) を渡すことができます。

behaviorValidator の使用例

動作マップ検証コントロールの外観の例はこちらです。 組織の分類や収集するイベントによっては、外観が異なる場合があります。

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

サンプル アプリ

や Name などのカスタム イベント プロパティおよびカスタムの動作とコンテンツを実装する方法については、parentidをご覧ください。 クリック データを入手できる場所については、サンプル アプリの readme を参照してください。

parentId キーの例

以下の例に、さまざまな構成で parentId としてフェッチされる値を示します。

これらの例は、parentDataTag が定義されているが、プラグインが DOM ツリーでこのタグを見つけることができない場合に、それに最も近い親要素内の id をプラグインがどのように使用するかを示しています。

例 1

例 1 では、parentDataTag は宣言されておらず、data-parentid または data-*-parentid はどの要素でも定義されていません。 この例は、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>

クリックされた要素 <Button> に対する parentId の値は not_specified です。parentDataTag の詳細が定義されておらず、かつ現在の要素内に親要素 ID が指定されていないためです。

例 2

例 2 では、parentDataTag が宣言されており、data-parentid が定義されています。 この例は、親 ID の詳細が収集されるしくみを示します。

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>

クリックされた要素 <Button> に対する parentId の値は parentid2 です。 parentDataTag が宣言されていても、data-parentid が要素内に直接定義されています。 このため、この値は、その親要素で定義されている他のすべての親 ID や ID 詳細よりも優先されます。

例 3

例 3 では、 parentDataTag が宣言され、 data-parentid または data-*-parentid 属性が定義されていません。 この例は、動的要素に parentDataTag または parentId が含まれていないときに id の値を収集するために、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>

クリックされた要素 <Button> に対する parentId の値は test6parent です。parentDataTag が宣言されているためです。 この宣言により、プラグインが現在の要素ツリーを走査できるため、親 ID の詳細が現在の要素内に直接指定されていないときは、最も近い親の ID が使用されます。 data-group="buttongroup1" が定義されているため、プラグインは parentId をより効率的に見つけることができます。

data-group="buttongroup1" 属性を削除した場合でも、parentId がまだ宣言されているため、test6parent の値は parentDataTag です。

トラブルシューティング

専用のトラブルシューティングに関する記事をご覧ください。

次のステップ

• データが流れていることを確認する
• 拡張された製品分析については、HEART ブックの利用に関するドキュメントを参照してください。
• Click Analytics Autocollection プラグインについては、GitHub リポジトリと npm パッケージを参照してください。
• 使用法エクスペリエンスでのイベントの分析を使用して上位のクリックを分析し、使用可能なディメンションでスライスします。
• クエリを記述するプロセスに慣れていない場合は、 Log Analytics を参照してください。
• ブックを作成するか Power BI にエクスポートして、クリック データのカスタム視覚化を作成します。