Splunk AppDynamics

passing event in the payload

CommunityUser
Splunk Employee
Splunk Employee

hi,

- I am using appdyanmics in my app for monitoring user activity.
- but the problem is it doesnt show how much time user has clicked the button.
- so using rxjs I have wrote a click event.
- this click event shows the mouse event and how to pass this mouse event in appdyanmics payload, so that I can generate a report usimg appdyanmics.
- providing my code changes below

appdyanmics Reference links:

https://docs.appdynamics.com/display/PRO42/Extend+the+JavaScript+Agent+for+Single+Page+Applications+...
https://docs.appdynamics.com/display/PRO42/Single+Page+Applications+in+Browser+RUM+-+AngularJS

sample appdynamics angular app https://github.com/derrekyoung/appd-sampleapp-angular2
<script src="https://cdn.appdynamics.com/adrum/adrum-latest.js"></script>

app.component.ts

```

import { Component } from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'AppDynamics Sample App for Angular 2';

click = new Subject();

ngOnInit() {
this.click.subscribe(console.log);
}


}

```

app.component.html

```

<h1>
{{title}}
</h1>

<header>
<div>

<!-- Navigation with router directives-->
<nav>
<a [routerLink]="['/']">Home</a>
<a [routerLink]="['/names']">Names</a>
<a [routerLink]="['/posts']">Posts</a>
<a [routerLink]="['/photos']">Photos</a>
</nav>
</div>
<div>
<!-- <button (click)="new Subject()" type="button">Click Me!</button> -->

<button (click)="click.next($event)">Click Me!</button>
</div>

</header>


<router-outlet></router-outlet>

```

appdynamics request payload

```

{
"vr": "4.4.1.154",
"dt": "R",
"rg": "0",
"es": [{
"eg": "1",
"et": 2,
"eu": "0://1/2/",
"ts": 1515610064377,
"mg": "2",
"au": "0://3/",
"at": 3,
"pp": 3,
"mx": {
"PLC": 1,
"FBT": 48,
"DDT": 0,
"DPT": 4,
"PLT": 52,
"ARE": 0
},
"md": "GET",
"xs": 200,
"si": 18
}],
"ai": "d4e7ef50_b4f3_1dd7_5cdf_49a60ff5635d",
"gs": ["bbe438d0_0c94_63d9_2c22_700343b560b5", "cde9c933_e332_41ce_9333_5021c1502265", "4e6a7f03_4588_49e2_6c25_d8a3a1f3fe90"],
"up": ["http", "jsonplaceholder.typicode.com", "users", "localhost:4200"]
}

```

Labels (1)
0 Karma

Mohammed_Rayan
Contributor

You can pass custom data using the approach given in the link below

https://docs.appdynamics.com/display/PRO44/Add+Custom+User+Data+to+a+Page+Browser+Snapshot

You can also refer the below link 

https://docs.appdynamics.com/display/PRO44/Extend+the+JavaScript+Agent+for+SPAs#ExtendtheJavaScriptA...

Regards,

Mohammed Rayan

0 Karma

CommunityUser
Splunk Employee
Splunk Employee

hi,

In my angular code can you tell me where to add it

0 Karma
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Index This | What travels the world but is also stuck in place?

April 2026 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Discover New Use Cases: Unlock Greater Value from Your Existing Splunk Data

Realizing the full potential of your Splunk investment requires more than just understanding current usage; it ...

Continue Your Journey: Join Session 2 of the Data Management and Federation Bootcamp ...

As data volumes continue to grow and environments become more distributed, managing and optimizing data ...