# CheckoutChamp

This guide will help you implement EdgeTag tracking on your Checkout Champ funnels to capture user interactions and conversions. Follow the steps below to set up event tracking based on your user journey requirements.

### Prerequisites

Before you begin, ensure you have:

**Active Checkout Champ Account** – With access to your funnels

**Blotout EdgeTag Domain Details** – Your unique EdgeTag tracking URL

<div data-full-width="true"><figure><img src="/files/cPjHEjrJPW2XagSNvp6s" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
If you **do not** have the registration details - Please follow our [guide to Get started on EdgeTag ](/overview/getting-started.md)
{% endhint %}

**List of Events to Track –** Refer to the EdgeTag [Standard Events](https://docs.edgetag.io/overview/standard-events) to identify which events align with your user journey

### Initialize EdgeTag (Funnel-Wide Setup)

This initialization enables PageView tracking across your entire Checkout Champ funnel.

#### Step 1: Access funnel settings

* Log in to your Checkout Champ Dashboard
* Navigate to Funnels and **select the funnel** you want to track
* Click on Funnel Settings or the gear icon

#### Step 2: Add EdgeTag initialization script

* In the Funnel Settings, navigate to **Custom Scripts** or **Tracking Scripts**
* Look for the **Header Scripts** section
* Paste the following script:

```html
<script>
 !(function () {
    const tagUrl = 'REPLACE_WITH_YOUR_EDGETAG_URL';
    !(function (u) {
      window.edgetag =
        window.edgetag ||
        function () {
          (edgetag.stubs = edgetag.stubs || []).push(arguments);
        };
      const t = document.createElement('script');
      (t.type = 'text/javascript'), (t.src = u), (t.async = !0);
      const e = document.getElementsByTagName('script')[0];
      e.parentNode.insertBefore(t, e);
    })(`${tagUrl}/load`);
    edgetag('init', {
      edgeURL: tagUrl,
      disableConsentCheck: true,
    });
  })();
  edgetag('tag', 'PageView');
</script>
```

* **Replace** 'REPLACE\_WITH\_YOUR\_EDGETAG\_URL' with your actual EdgeTag domain URL from your Blotout EdgeTag Dashboard
* Click Save or Update

#### Step 3: Publish your funnel

* Publish your funnel to make the changes live
* PageView events will now be tracked automatically on all pages within this funnel

### Track additional events

Beyond PageView tracking, you can capture specific user actions such as form submissions, checkout events, and purchases.

### Choosing your implementation scope

* Funnel-Wide Tracking: Add code to Funnel Settings → Custom Scripts (applies to all pages in the funnel)
* Page-Specific Tracking: Add code to individual page settings (applies to one page only)

### Example: Tracking lead capture from Email submission

This example demonstrates how to track email submissions as Lead events on a specific page.

#### Step 1: Navigate to page settings

* Open the page containing your email capture input field /form in Checkout Champ
* Click on Page Settings or the gear icon
* Go to the Custom Code or Custom Scripts section

#### Step 2: Add lead tracking script

In the Header Scripts or Page Scripts section, add the following script:

```html
<script>
document.addEventListener(
    'submit',
    (event) => {
      // Find the email input field in the submitted form
      const emailElement = event.target.querySelector('input[type="email"]');
      const email = emailElement && emailElement.value;
      
      // Only proceed if email exists
      if (!email) {
        return;
      }
      // Send email data to EdgeTag
      edgetag('data', { email: email });
      // Tag the event as a Lead
      edgetag('tag', 'Lead');
    },
    { capture: true }
  );
</script>
```

#### Step 3: Publish changes

Publish your funnel to start capturing Lead events from form submissions.

### Tracking other events

You can implement tracking for any event from the EdgeTag Standard Event Catalog by following the same pattern:

* Identify the trigger – What user action should fire the event? (button click, form submit, page load, etc.)
* Select the event type – Choose the appropriate event from the Standard Event Catalog
* Write the tracking code – Use JavaScript to detect the trigger and call **edgetag('tag', 'EventName')**
* Add to Checkout Champ – Place code in funnel-wide or page-specific settings
* Publish and test – Deploy changes and verify events are firing correctly

### General code structure

All EdgeTag event tracking follows this basic pattern. Kindly follow this outline for your custom event tracking implementations&#x20;

```javascript
// 1. Wait for the page to load (if needed) or use a listener for the relevant events 
document.addEventListener('DOMContentLoaded', function() {
  
  // 2. Detect user action
  document.querySelector('.your-element').addEventListener('click', 
  function() {  
    // 3. (Optional) Capture additional data
    edgetag('data', { 
      email: 'user@example.com',
      phone: '1234567890'
    });  
    // 4. Tag the event
    edgetag('tag', 'EventName', {
      // Optional event properties
      currency: 'USD',
      value: 99.99
    });
  });
});
```

### Need custom implementation?

Contact EdgeTag support on [Slack](https://join.slack.com/t/blotout-shared/shared_invite/zt-3gpja9dut-vQ4enN3EcGRg~q5roDAlmg) , Our team is ready to help with code customization and implementation support.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.edgetag.io/onboarding/e-commerce/custom-landing-page/checkoutchamp.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.