> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/native-integrations/firebase-analytics/custom-analytics.md).

# Custom Analytics

Track the events that matter to your business.

[Auto tracked events](/native-integrations/firebase-analytics/auto-tracked-analytics.md) tell you how people move around your app. Custom events tell you whether they did the thing you care about — added to cart, booked, subscribed, finished.

{% hint style="info" %}
Custom Analytics is **Premium**, and the tab stays locked until [Firebase Analytics](/native-integrations/firebase-analytics.md) setup is complete.
{% endhint %}

There are three ways to record one.

## 1. Navigation bar buttons

Every navigation bar button can report its own taps. When adding or editing one, turn on **Enable Firebase Analytics** and give the event a name.

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2Fgit-blob-b98f6a4fc41b9e3e077cf8e5f7c92ba7991e9f15%2Ffirebase-analytics-custom-events.png?alt=media" alt="The Custom events tab"><figcaption></figcaption></figure>

This works for every button type — [Linker](/navigation-bar-buttons/linker-button.md), [Cart](/navigation-bar-buttons/cart-button.md), [Custom](/navigation-bar-buttons/custom-button.md), [Native Link Sharing](/navigation-bar-buttons/native-link-sharing.md), [Hamburger](/navigation-bar-buttons/hamburger-menu.md) and Multi Language — and for individual items inside a hamburger menu.

The name you enter is the event name in Firebase. Something like `nav_cart_clicked` reads clearly in a report months later.

## 2. Webpage element clicks

To track a tap on something on your own website — an **Add to Cart** button, a filter, a link — click **Create new event** and fill in:

| Field                    | What to enter                                  |
| ------------------------ | ---------------------------------------------- |
| **Element's identifier** | The class or id of the element to watch.       |
| **Event Name**           | What the event is called in Firebase.          |
| **Property Key & Value** | Optional extra detail recorded with the event. |

Find the identifier by opening your site in a desktop browser, right-clicking the element and choosing **Inspect** — the same method as the [cart counter](/navigation-bar-buttons/cart-button.md).

**Property Key & Value** is how you tell identical events apart. If your Add to Cart button carries the same identifier on listing and product pages, add `clicked_from` / `Product listing page` so the report shows which one customers use.

{% hint style="warning" %}
This depends on your website's markup. If a theme update renames that class, the event stops recording — silently, with no error. Check your events after any theme change.
{% endhint %}

## 3. From your own code

For something no click can capture — an order completing, a form validating, a video finishing — call the bridge function:

```javascript
twinr_firebase_analytics_event('event_id')
```

{% hint style="warning" %}
The value you pass is an event **configured in your Twinr dashboard**, not a name you invent. An id that has not been set up records nothing. See [What is the JS Bridge](/js-bridge/what-is-the-js-bridge.md).
{% endhint %}

## Naming events

Pick a convention and keep it. Firebase treats `add_to_cart`, `AddToCart` and `add-to-cart` as three unrelated events, and you cannot merge them afterwards.

Lowercase with underscores is the usual choice. Name the action, not the element: `checkout_started` still makes sense after you redesign the button.

## Check it

Custom events do not record from Twinr Preview. Test with a real build, and use Firebase's **DebugView** to watch events arrive in real time rather than waiting for the next day's report.