This is a simple HTML/CSS/JS web app that illustrates how to enable Application Insights Click Analytics Plugin
It is built on the Carousel template by Bootstrap.
- Git and Node.js installed on your computer.
- Familiarity with editing text and code files in any text editor.
-
Create an Application Insights resource in Azure by following these instructions.
-
Open terminal and clone the repo using
git clone
-
Grab the Instrumentation Key (aka "ikey") from the resource you created in step 1. Later, you'll add it to the instrumentationKey setting in the
public/ts/appinsights.ts
file -
In the project directory you should run
npm install
on your terminal to install all the dependencies. -
After making the changes in step-3, please run
npm run build
on your terminal to transpile and browserify theappinsights.ts
file -
To launch the app locally , simply run the following command on your terminal
node index.js
-
Open your favorite browser and go to http://localhost:8000/
- Please go to Application Insights resource in the Azure portal.
- On the left hand side of the portal , looking for 'Logs' unders the 'Monitoring' section and click to open 'Logs'.
- Run a simple Kusto query to fetch the latest records from the 'customEvents' table as shown below(change the date accordingly):
customEvents
| where timestamp > datetime(2021-01-20) and timestamp < datetime(2021-01-21)
Following is an example illustrating how the click event on 'Home' button has generated a new record with name
'HomeButton' in 'customEvents' table of Application Insights.
Following is an example illustrating how the click event on 'Home' button has generated a new record with parentId
'navbar-wrapper' in 'customEvents' table of Application Insights.
Following is an example illustrating how the click event on 'About' button has generated a new record with content
values {"foo"="bar"} in 'customEvents' table of Application Insights.
Following is an example illustrating how the click event on 'About' button has generated a new record with behavior
value '2' in 'customEvents' table of Application Insights.
If you are wondering how 'Navigator' in html event translated to '2' in Kusto table,
BehaviorMapValidator
which took thebehaviorMap
as input has done this mapping.