HTML Attributes Tracking

Track user interactions using simple HTML data attributes - no JavaScript required

Goal Tracking
Track clicks on any element using the data-ed-goal attribute

Basic Goal Tracking

<!-- Track a button click -->
<button data-ed-goal="signup_clicked">Sign Up</button>

<!-- Track a link click -->
<a href="/pricing" data-ed-goal="pricing_viewed">View Pricing</a>

<!-- Track any element -->
<div data-ed-goal="banner_clicked" class="banner">
  Click me!
</div>

Goal Tracking with Parameters

Add custom parameters using data-ed-goal-* attributes:

<button
  data-ed-goal="purchase_initiated"
  data-ed-goal-product-id="prod_123"
  data-ed-goal-amount="99.99"
  data-ed-goal-currency="USD"
>
  Buy Premium
</button>

Parameter names are automatically converted from kebab-case to snake_case:data-ed-goal-product-id → product_id

Scroll Tracking
Track when sections become visible using the data-ed-scroll attribute

Basic Scroll Tracking

<!-- Track when section is 50% visible (default) -->
<section data-ed-scroll="pricing_viewed">
  <h2>Pricing</h2>
  <p>Our pricing plans...</p>
</section>

Custom Visibility Threshold

Control when the event fires using data-ed-scroll-threshold:

<!-- Track when 75% of section is visible -->
<section
  data-ed-scroll="testimonials_viewed"
  data-ed-scroll-threshold="0.75"
>
  <h2>Testimonials</h2>
</section>

Visibility Delay

Require the section to be visible for a minimum duration using data-ed-scroll-delay:

<!-- Track when section is visible for 2 seconds -->
<section
  data-ed-scroll="content_engaged"
  data-ed-scroll-threshold="0.5"
  data-ed-scroll-delay="2000"
>
  <h2>Important Content</h2>
</section>

Scroll Tracking with Parameters

<section
  data-ed-scroll="section_viewed"
  data-ed-scroll-section-name="pricing"
  data-ed-scroll-section-id="pricing-1"
>
  <h2>Pricing Section</h2>
</section>
Parameter Validation Rules

Parameter Names

Lowercase, numbers, underscores, hyphens. Max 64 characters. Auto-converted from kebab-case to snake_case.

data-ed-goal-product-id → product_id

Parameter Values

Any characters allowed. Maximum 255 characters per value.

Parameters Per Event

Maximum 10 custom parameters per event (goals or scroll events).

Scroll Threshold

Number between 0 and 1. Default: 0.5 (50% visible). Example: 0.75 means element must be 75% visible.

Scroll Delay

Milliseconds to wait before counting scroll event. Default: 0. Example: 2000 means wait 2 seconds.

Complete Example
<!DOCTYPE html>
<html>
<head>
  <script
    defer
    data-api-key="ed_your_api_key_here"
    src="https://www.eventda.sh/tracker.js"
  ></script>
</head>
<body>
  <!-- Track button clicks -->
  <button data-ed-goal="signup_clicked">Sign Up</button>

  <!-- Track with parameters -->
  <button
    data-ed-goal="purchase"
    data-ed-goal-product="premium_plan"
    data-ed-goal-price="99.99"
  >
    Buy Now
  </button>

  <!-- Track section visibility -->
  <section data-ed-scroll="pricing_viewed">
    <h2>Pricing</h2>
    <p>Our pricing plans...</p>
  </section>

  <!-- Track with delay requirement -->
  <section
    data-ed-scroll="testimonials_engaged"
    data-ed-scroll-threshold="0.8"
    data-ed-scroll-delay="3000"
  >
    <h2>Customer Testimonials</h2>
  </section>
</body>
</html>