Custom data attributes let you track specific link clicks and button interactions as GA4 events — without writing any JavaScript. Just add data-inpipe-* attributes to your HTML elements, and inPIPE handles the rest.
This is ideal for tracking actions like generate_lead, select_item, sign_up, or any other GA4 event directly from your page elements.
How It Works #
- Add
data-inpipe-event="yes"to any link or button you want to track - Set
data-inpipe-event-nameto the GA4 event name (e.g.generate_lead) - Add any optional GA4 parameters as additional
data-inpipe-*attributes - inPIPE detects the click, collects the attributes, enriches the data, and sends it through the Transmute Engine to your connected platforms
Any element without data-inpipe-event="yes" is treated as a regular click and ignored by inPIPE.
The Naming Convention #
Attribute names follow a simple rule:
- HTML attributes use hyphens:
data-inpipe-item-list-id - GA4 parameter values use underscores:
select_item,starter_plan
The mapping is automatic — strip data-inpipe-, convert hyphens to underscores, and you get the GA4 parameter name:
data-inpipe-event-name → event_name
data-inpipe-item-id → item_id
data-inpipe-item-list-id → item_list_idNo lookup table needed. The attribute name is the GA4 parameter name in HTML-friendly format.
Required Attributes #
| Attribute | Value | Purpose |
|---|---|---|
data-inpipe-event | yes | Marks this element as a tracked event (required) |
data-inpipe-event-name | GA4 event name | The event to send, e.g. select_item, generate_lead |
Optional GA4 Parameters #
Add any of these attributes to pass extra data with your event. All are optional.
| Attribute | GA4 Parameter | Example Value |
|---|---|---|
data-inpipe-item-id | item_id | starter_plan |
data-inpipe-item-name | item_name | Starter Plan |
data-inpipe-item-category | item_category | pricing |
data-inpipe-item-list-id | item_list_id | pricing_table |
data-inpipe-item-list-name | item_list_name | Pricing Plans |
data-inpipe-value | value | 29 |
data-inpipe-currency | currency | USD |
data-inpipe-method | method | button_click |
data-inpipe-content-type | content_type | plan |
data-inpipe-promotion-id | promotion_id | summer_2025 |
data-inpipe-promotion-name | promotion_name | Summer Sale |
For the full list of GA4 event parameters, see Google’s GA4 event reference.
Enrichment #
By default, inPIPE enriches your event with server-side context before sending it to the Transmute Engine:
- User ID, Client ID, Session ID
- Page location, page title, page referrer
- UTM parameters from the session
- WooCommerce customer data (if available)
- Timestamp and engagement time
If you already have your own data and do not want enrichment, set data-inpipe-enrich=false. The event will be forwarded to Transmute exactly as provided.
| Mode | Attribute | Behaviour |
|---|---|---|
| Enriched (default) | data-inpipe-enrich=true or omitted | inPIPE adds server-side context automatically |
| Pass-through | data-inpipe-enrich=false | Data is forwarded as-is, no enrichment |
Examples #
Track a lead — Contact Us button #
The simplest setup. Just the event gate and event name — inPIPE enriches everything else automatically.
<a href=/contact
data-inpipe-event=yes
data-inpipe-event-name=generate_lead>
Contact Us
</a>Track a pricing selection #
Tracks which plan a user clicks, with full item details for GA4 reporting.
<a href=/checkout/growth
data-inpipe-event=yes
data-inpipe-event-name=select_item
data-inpipe-item-id=growth_plan
data-inpipe-item-name=Growth Plan
data-inpipe-item-category=pricing
data-inpipe-item-list-id=pricing_table
data-inpipe-item-list-name=Pricing Plans
data-inpipe-value=99
data-inpipe-currency=USD>
Get Growth — /mo
</a>Track a demo request #
<a href=/demo
data-inpipe-event=yes
data-inpipe-event-name=generate_lead
data-inpipe-method=demo_request
data-inpipe-content-type=demo>
Request a Demo
</a>Track a feature page click #
<a href=/features/transmute
data-inpipe-event=yes
data-inpipe-event-name=view_item
data-inpipe-item-id=transmute_engine
data-inpipe-item-name=Transmute Engine
data-inpipe-item-category=features>
Learn More
</a>Track a newsletter signup #
<button
data-inpipe-event=yes
data-inpipe-event-name=sign_up
data-inpipe-method=newsletter
data-inpipe-content-type=email>
Subscribe
</button>Track a promo banner (pass-through, no enrichment) #
<a href=/sale
data-inpipe-event=yes
data-inpipe-enrich=false
data-inpipe-event-name=select_promotion
data-inpipe-promotion-id=summer_2025
data-inpipe-promotion-name=Summer Sale
data-inpipe-value=0>
Shop the Summer Sale
</a>Common GA4 Event Names #
These are standard GA4 event names you can use with data-inpipe-event-name:
| Event Name | Use Case |
|---|---|
generate_lead | Contact forms, demo requests, enquiry buttons |
select_item | Clicking on a product, plan, or listing |
view_item | Clicking through to a product or feature page |
sign_up | Newsletter signups, account registrations |
select_promotion | Clicking on a promo banner or offer |
add_to_cart | Adding a product to cart |
begin_checkout | Starting the checkout process |
Tips #
- You can use custom data attributes on any HTML element — links, buttons, divs, images
- Only elements with
data-inpipe-event=yesare tracked. Everything else is ignored. - You only need
data-inpipe-eventanddata-inpipe-event-nameat minimum. All other parameters are optional. - Any new
data-inpipe-*attribute you add is automatically mapped to its GA4 equivalent — no code changes required - Use enrichment (the default) unless you have a specific reason to pass data through raw
Adding Custom Attributes in Page Builders #
Most page builders support custom data attributes. Here is how to add data-inpipe-* attributes in each builder:
| Page Builder | Support | Documentation |
|---|---|---|
| Bricks Builder | Built-in (Style > Attributes panel) | Bricks Custom Attributes |
| Elementor Pro | Built-in (Advanced > Custom Attributes, key|value format) | Custom Attributes · Custom Link Attributes |
| Divi 5 | Built-in (Advanced > Attributes, can target wrapper or button) | Divi 5 Custom Attributes · ARIA & Data Attributes |
| Gutenberg / Block Editor | Requires plugin | Attributes for Blocks plugin — adds an attributes panel to any block |
| Kadence Blocks | CSS classes and IDs only — no custom data attributes natively | Kadence Classes & IDs · Feature request Workaround: use the Attributes for Blocks plugin above, or an HTML block |
| Plain HTML / Classic Editor | Full support — add attributes directly | No plugin needed. Add attributes in the Text or Code tab. |