# How I can create a track button to track events like http **URL:** \ **Category:** APM\ **Tags:** rum\ **Created:** [August 3, 2020, 2:26pm UTC](https://discuss.elastic.co/t/how-i-can-create-a-track-button-to-track-events-like-http/243589 "2020-08-03T14:26:09Z")\ **Posts on this page:** 6\ **Page:** 1
**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:** [August 3, 2020, 2:26pm UTC](https://discuss.elastic.co/t/how-i-can-create-a-track-button-to-track-events-like-http/243589/1 "2020-08-03T14:26:09Z")
**Kibana version** :7.6.2 **APM Agent language and version** : elastic/apm-rum@5.30.0 **Browser version** : google chrome 84.0.4147.105 **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 need to create a track button. This button must sometimes handle with events http are request It has **traceparent** in your header. I need to send to apm-server one transaction with the name button in one transaction type call **buttons**. I want to know How I track any event http and handle only after the conclussion event http. Is there some tutorial for this? I need like this print: ![73749985-b0faa100-475c-11ea-8cb4-4a359cf4cc0b](https://us1.discourse-cdn.com/elastic/original/3X/8/6/8636cccd80544ff964dd4f04ef4f42cd6f901a3a.png) Im trying to use **apm.observe** with **transaction:end** inside the useEffect in the button. However, When I created one transaction with **startTransaction** and I called **transactions.end()** it doesnt work, it doesnt call **events** api. ---
**Author:** ![vigneshshanmugam](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vigneshshanmugam/32/40324_2.png) [@vigneshshanmugam](https://discuss.elastic.co/u/vigneshshanmugam)\ **Post date:** [August 5, 2020, 10:10am UTC](https://discuss.elastic.co/t/how-i-can-create-a-track-button-to-track-events-like-http/243589/2 "2020-08-05T10:10:57Z")
Hi @alexandreservian The RUM agent automatically tracks all click user interactions and try to create a transaction with `user-interaction` as its type. Details are here [https://www.elastic.co/guide/en/apm/agent/rum-js/master/supported-technologies.html#user-interactions](https://www.elastic.co/guide/en/apm/agent/rum-js/master/supported-technologies.html#user-interactions) If you do want to replicate this behaviour, you can use the API `startTransaction` and create the click transactions manually. ```auto button.addEventListener('click', () => { const tr = apm.startTransaction('button-click', 'user-interaction'); // do something which requests the http call which would be captured as span as part of the // click transaction tr.end() }) ``` Let us know if you need any help. Thanks, Vignesh ---
**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:** [August 5, 2020, 11:43am UTC](https://discuss.elastic.co/t/how-i-can-create-a-track-button-to-track-events-like-http/243589/3 "2020-08-05T11:43:20Z")
Hello @vigneshshanmugam OK, however, I do like this: ```javascript useEffect(() => { apm.observe('transaction:end', function(tras) { if (tras.type === 'query') { console.log(tras); const transaction = apm.startTransaction( 'Application start 5', 'button', { managed: true, canReuse: true } ); transaction.end(); } }); }, []); ``` And, this example dont work, however, this another example works: ```javascript useEffect(() => { apm.observe('transaction:end', function(tras) { if (tras.type === 'query') { console.log(tras); const transaction = apm.startTransaction( 'Application start 5', 'button', { managed: true, canReuse: true } ); afterFrame(() => transaction && transaction.detectFinish()); } }); }, []); ``` My question is: How do i send the traceId of the variable **tras** in this transaction? I want to add this previous traceId in current transaction to create the timeline with traceId first request http. ---
**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:** [August 5, 2020, 12:29pm UTC](https://discuss.elastic.co/t/how-i-can-create-a-track-button-to-track-events-like-http/243589/4 "2020-08-05T12:29:10Z")
The another question: You telled me APM JS does automatically tracks all click user interactions, but, how can I add one name for this transaction?Currently it is like this **Click - body**. Other question is: the user-interaction can automatically tracks the events http trigger by himself ? ---
**Author:** ![vigneshshanmugam](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vigneshshanmugam/32/40324_2.png) [@vigneshshanmugam](https://discuss.elastic.co/u/vigneshshanmugam)\ **Post date:** [August 10, 2020, 4:03pm UTC](https://discuss.elastic.co/t/how-i-can-create-a-track-button-to-track-events-like-http/243589/5 "2020-08-10T16:03:07Z")
> how can I add one name for this transaction?Currently it is like this **Click - body**. You can observe for the `transaction:end` event as per your example and change the transaction name before the transaction events are reported to the server. > Other question is: the user-interaction can automatically tracks the events http trigger by himself ? Its the other way around, Assume a user clicks on navigation menu of an e-commerce website, that click will render a new page issuing few HTTP requests. In this case, the RUM agent would capture all the information under `Click-