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

If you do not have the registration details - Please follow our guide to Get started on EdgeTag

List of Events to Track – Refer to the EdgeTag 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:

<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:

<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

// 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: '[email protected]',
      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 , Our team is ready to help with code customization and implementation support.