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

[アーティクル]
10/15/2024

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

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

前提条件

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

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

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

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

名前	説明	サンプル
名前	カスタムイベントの名前です。 name の設定方法の詳細については、name 列に関するセクションを参照してください。	詳細
itemType	イベントの種類。	customEvent
sdkVersion	Application Insights SDK とクリックプラグインのバージョン。	JavaScript:2_ClickPlugin2

カスタムディメンション

名前	説明	サンプル
actionType	クリックイベントを発生させたアクションの種類。左クリックでも右クリックでもかまいません。	CL
baseTypeSource	カスタムイベントの基本型のソース。	ClickEvent
clickCoordinates	クリックイベントがトリガーされた座標。	659X47
コンテンツ	追加の `data-*` 属性と値を格納するためのプレースホルダー。	[{sample1:value1, sample2:value2}]
pageName	クリックイベントがトリガーされたページのタイトル。	サンプルタイトル
parentId	親要素の ID または名前。 parentId の設定方法の詳細については、「parentId キー」を参照してください。	navbarContainer

カスタム測定値

名前	説明	サンプル
timeToAction	初期ページの読み込み後、ユーザーが要素をクリックするまでにかかった時間 (ミリ秒)。	87407

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

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

Note

インストルメンテーションキーのインジェストのサポートは、2025 年 3 月 31 日に終了します。インストルメンテーションキーのインジェストは引き続き機能しますが、この機能の更新プログラムやサポートは提供されなくなります。接続文字列に移行することで、新機能をご利用いただけます。

Application Insights を有効にしたい各ページの上部に JavaScript (Web) SDK ローダースクリプトを貼り付けます。

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

JavaScript (Web) SDK ローダースクリプトの構成を追加または更新するには、「JavaScript (Web) SDK ローダースクリプトの構成」を参照してください。

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

ヒント

フレームワーク拡張機能を追加する場合、または既に追加している場合は、Click Analytics プラグインを追加する方法に関する React、React Native、Angular のコードサンプルを参照してください。

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

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

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

プラグインを使用する

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

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

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

`name`

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

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

`contentName`

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

クリックされた HTML <a> 要素の場合、プラグインは innerText (text) 属性の値の収集を試みます。プラグインがこの属性を見つけられない場合は、その innerHtml 属性の値の収集を試みます。
クリックされた HTML <img> または <area> 要素の場合、プラグインはその alt 属性の値を収集します。
クリックされたその他のすべての HTML 要素について、contentName は、優先順位の順に一覧表示される、次の規則に基づいて設定されます。
1. 要素の value 属性の値
2. 要素の name 属性の値
3. 要素の alt 属性の値
4. 要素の innerText 属性の値
5. 要素の id 属性の値

`parentId` キー

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

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

parentDataTag を宣言した場合、プラグインは、parentId として、クリックされた要素に最も近い要素内に定義されている id または data-*-id の値をフェッチします。
data-*-id と id の両方が定義されている場合は、data-*-id が優先されます。
parentDataTag が定義されているが、プラグインが DOM ツリーでこのタグを見つけることができない場合、プラグインは、parentId として、クリックされた要素に最も近い要素内に定義されている id または data-*-id を使用します。ただし、parentId を見つけるために必要なループの数を減らすために、data-{parentDataTag} または customDataPrefix-{parentDataTag} 属性を定義することをお勧めします。 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 キーの例」を参照してください。

注意事項

parentDataTag がアプリケーションのどれかの HTML 要素に含まれる場合、SDK はアプリケーション全体で親タグの検索を開始します。それを使用した HTML 要素だけで検索をする訳ではありません。
クリック分析プラグインと共に HEART ブックを使用している場合、HEART イベントをログに記録または検出するには、エンドユーザーのアプリケーションの他のすべての部分でタグ parentDataTag を宣言する必要があります。

`customDataPrefix`

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

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

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

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

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

高度な構成を追加する

名前	Type	Default	説明
autoCapture	Boolean	True	自動キャプチャの構成。
コールバック (callback)	IValueCallback	[Null]	コールバックの構成。
pageTags	Object	Null	ページタグ。
dataTags	ICustomDataTags	[Null]	クリックデータのキャプチャに使用される既定のタグをオーバーライドするために指定されるカスタムデータタグ。
urlCollectHash	Boolean	False	URL の "#" 文字の後の値のログ記録を有効にします。
urlCollectQuery	Boolean	False	URL のクエリ文字列のログ記録を有効にします。
behaviorValidator	機能	[Null]	`data-*-bhvr` 値の検証に使用するコールバック関数。詳細については、behaviorValidator のセクションを参照してください。
defaultRightClickBhvr	文字列 (または) 数値	''	右クリックイベントが発生した場合の既定の動作値。この値は、要素に `data-*-bhvr` 属性が含まれている場合にオーバーライドされます。
dropInvalidEvents	Boolean	False	有効なクリックデータがないイベントを削除するためのフラグ。

IValueCallback

名前	Type	Default	説明
pageName	機能	[Null]	既定の `pageName` キャプチャ動作をオーバーライドするための関数。
pageActionPageTags	機能	[Null]	`pageAction` イベント中に収集された既定の `pageTags` を拡張するためのコールバック関数。
contentName	機能	[Null]	カスタマイズされた `contentName` を設定するためのコールバック関数。

ICustomDataTags

名前	Type	Default	HTML で使用する既定のタグ	説明
useDefaultContentNameOrId	Boolean	False	該当なし	`true` の場合、特定の要素が既定のデータプレフィックスまたは `customDataPrefix` でタグ付けされていないときに、`contentName` の標準の HTML 属性 `id` を収集します。そうでない場合、`contentName` の標準の HTML 属性 `id` は収集されません。
customDataPrefix	String	`data-`	`data-*`	指定されたプレフィックスでタグ付けされている要素のコンテンツ名と値を自動キャプチャします。たとえば、HTML タグ内で `data-*-id`、`data-<yourcustomattribute>` を使用できます。
aiBlobAttributeTag	String	`ai-blob`	`data-ai-blob`	プラグインでは、個々の `data-*` 属性ではなく JSON BLOB 属性がサポートされています。
metaDataPrefix	String	Null	N/A	キャプチャ時に指定されたプレフィックスを持つ HTML 見出しのメタ要素名とコンテンツを自動キャプチャします。たとえば、HTML メタタグ内で `custom-` を使用できます。
captureAllMetaDataContent	Boolean	False	該当なし	すべての HTML 見出しのメタ要素名とコンテンツを自動キャプチャします。既定値は false です。有効にすると、指定された `metaDataPrefix` がオーバーライドされます。
parentDataTag	String	Null	N/A	`data-parentid` または `data-*-parentid` が見つからない場合、ログ内の `parentId` をフェッチします。効率を高めるために、`data-{parentDataTag}` または `customDataPrefix-{parentDataTag}` 属性が見つかるときに要素のコンテンツ名および値をキャプチャするための DOM の走査を停止します。詳細については、「parentId キー」を参照してください。
dntDataTag	String	`ai-dnt`	`data-ai-dnt`	テレメトリデータをキャプチャするためのプラグインでは、この属性を含む HTML 要素は無視されます。

behaviorValidator

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

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

コールバック関数

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

名前	[説明]
BehaviorValueValidator	このコールバック関数は、動作のデータ構造が文字列の配列である場合に使用します。
BehaviorMapValidator	このコールバック関数は、動作のデータ構造がディクショナリである場合に使用します。
BehaviorEnumValidator	このコールバック関数は、動作のデータ構造が列挙型である場合に使用します。

文字列または数値で渡す

渡すバイトを減らすには、フルテキスト文字列ではなく数値で渡します。コストが問題でない場合は、フルテキスト文字列 (例: 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 などのカスタムイベントプロパティおよびカスタムの動作とコンテンツを実装する方法については、クリック分析自動収集プラグインが有効になっている単純な Web アプリをご覧ください。クリックデータを入手できる場所については、サンプルアプリの 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 属性が定義されていません。この例は、動的要素に id または data-*-id が含まれていないときに parentId の値を収集するために、parentDataTag の宣言が役立つようすを示しています。

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" 属性を削除した場合でも、parentDataTag がまだ宣言されているため、parentId の値は test6parent です。

トラブルシューティング

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

次のステップ

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

次の方法で共有

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

前提条件

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

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

カスタムディメンション

カスタム測定値

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

コードを追加する

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

プラグインを使用する

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

`name`

`contentName`

`parentId` キー

`customDataPrefix`

高度な構成を追加する

IValueCallback

ICustomDataTags

behaviorValidator

コールバック関数

文字列または数値で渡す

behaviorValidator の使用例

サンプルアプリ

`parentId` キーの例

例 1

例 2

例 3

トラブルシューティング

次のステップ

フィードバック

その他のリソース

次の方法で共有

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

前提条件

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

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

カスタム ディメンション

カスタム測定値

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

コードを追加する

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

プラグインを使用する

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

name

contentName

parentId キー

customDataPrefix

高度な構成を追加する

IValueCallback

ICustomDataTags

behaviorValidator

コールバック関数

文字列または数値で渡す

behaviorValidator の使用例

サンプル アプリ

parentId キーの例

例 1

例 2

例 3

トラブルシューティング

次のステップ

フィードバック

その他のリソース

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

カスタムディメンション

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

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

`name`

`contentName`

`parentId` キー

`customDataPrefix`

サンプルアプリ

`parentId` キーの例