# How to make the user-interaction work in my SPA

**URL:** <https://discuss.elastic.co/t/how-to-make-the-user-interaction-work-in-my-spa/236354>\
**Category:** APM\
**Tags:** rum\
**Created:** [June 9, 2020, 1:59pm UTC](https://discuss.elastic.co/t/how-to-make-the-user-interaction-work-in-my-spa/236354 "2020-06-09T13:59:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexandreservian](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/alexandreservian/32/69302_2.png) [@alexandreservian](https://discuss.elastic.co/u/alexandreservian)\
**Post date:** [June 9, 2020, 1:59pm UTC](https://discuss.elastic.co/t/how-to-make-the-user-interaction-work-in-my-spa/236354/1 "2020-06-09T13:59:11Z")

</div>

**Kibana version** :7.6.2

**APM Agent language and version** : elastic/apm-rum@5.20.0

**Browser version** : google chrome 83.0.4103.61

**Original install method (e.g. download page, yum, deb, from source, etc.) and version** : npm

**Description of the problem including expected versus actual behavior. Please include screenshots (if relevant)** :

Hi guys. I don't understand how use **user-interaction**. In my report sometimes is  
appearing some records like :

 ![Captura de tela de 2020-06-09 10-53-39](https://us1.discourse-cdn.com/elastic/original/3X/b/6/b6b927eec5ea83be5da676f2fd8271794d181196.png) .  
My questions are:

- How I association one determinate button to create one transaction;
- This button, How i put some name for separete this resultis at KImbana

---

<div class="post-metadata">

**Author:** ![caue.marcondes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/caue.marcondes/32/61739_2.png) [@caue.marcondes](https://discuss.elastic.co/u/caue.marcondes)\
**Post date:** [June 10, 2020, 7:54am UTC](https://discuss.elastic.co/t/how-to-make-the-user-interaction-work-in-my-spa/236354/2 "2020-06-10T07:54:39Z")

</div>

hi @alexandreservian, good to talk with you again 😃

You can manually create transactions or spans wherever you think is important. We have this [documentation page](https://www.elastic.co/guide/en/apm/agent/rum-js/master/custom-transactions.html) which explains how you can do it.

I also found this blog, is a bit old but might be helpful. [https://www.elastic.co/blog/performing-real-user-monitoring-rum-with-elastic-apm](https://www.elastic.co/blog/performing-real-user-monitoring-rum-with-elastic-apm)

---

<div class="post-metadata">

**Author:** ![alexandreservian](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/alexandreservian/32/69302_2.png) [@alexandreservian](https://discuss.elastic.co/u/alexandreservian)\
**Post date:** [June 10, 2020, 11:02am UTC](https://discuss.elastic.co/t/how-to-make-the-user-interaction-work-in-my-spa/236354/3 "2020-06-10T11:02:57Z")

</div>

Hi @caue.marcondes. But I want about **user-interaction**. How I uso it. Becauso many buttons in my sistem dispach actions with graphql. I want the buttons dispach the transactions  
associates with the same trace id. How do I make this?

---

<div class="post-metadata">

**Author:** ![Hamidreza](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/hamidreza/32/21369_2.png) [@Hamidreza](https://discuss.elastic.co/u/Hamidreza)\
**Post date:** [June 10, 2020, 12:20pm UTC](https://discuss.elastic.co/t/how-to-make-the-user-interaction-work-in-my-spa/236354/4 "2020-06-10T12:20:44Z")

</div>

Hi @alexandreservian,

I made a comment in [this issue](https://github.com/elastic/apm-agent-rum-js/issues/496) regarding your question, in summary:

the user-interaction transactions are automatically captured. We use the `tagName` and `name` attribute to generate the transaction name i.e. `Click - ${tagName}["${name}"]` so you can add the `name` attribute to the button tag to change the transaction name. Another way of changing any transaction is by registering an [observer](https://www.elastic.co/guide/en/apm/agent/rum-js/current/agent-api.html#observe) for `transaction:end` (or `transaction:start`) and change the transaction name in the listener.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 1, 2020, 8:20am UTC](https://discuss.elastic.co/t/how-to-make-the-user-interaction-work-in-my-spa/236354/5 "2020-07-01T08:20:53Z")

</div>

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.