Funnelish

This guide will help you implement EdgeTag tracking on your Funnelish 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 Funnelish Account – With access to your funnels.

Blotout EdgeTag Domain Registration 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 Funnelish funnel.

Step 1: Access funnel settings

1. Log in to your Funnelish Dashboard

2. Navigate to Funnels and select the funnel you want to track

3. Click on Funnel Settings or the gear icon

Step 2: Add EdgeTag initialization script

1. In the Funnel Settings, navigate to Tracking & Scripts or Custom Code

2. Look for the Header Code or Global Scripts section

3. Refer to 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>

1. Replace 'REPLACE_WITH_YOUR_EDGETAG_URL' with your actual EdgeTag domain URL from your Blotout EdgeTag Dashboard.

2. Click Save Changes

Step 3: Publish your funnel

1. Publish your funnel to make the changes live

2. 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 → Tracking & Scripts (applies to all pages in the funnel)

Page-Specific Tracking: Add code to individual page settings (applies to one page only)

Let's take an example of the add to cart event for individual pages.

Example: Tracking Add To Cart capture from product page

Step 1: Navigate to page settings

• Open the page containing your product/products in Funnelish

• Click on Page Settings (gear icon)

• Go to the Tracking Code or Custom Code section

Step 2: Add AddToCart event tracking script

Add this to product pages or to any page where users can add items. In the Header Code or Body Code section, refer to the following script.

<script>
 // Track Add to Cart button clicks
  document.addEventListener('click', function(event) {
    if (event.target.matches('.add-to-cart-btn, [data-action="add-to-cart"]')) {
      // Extract product information (adjust the below selector code based 
      // on your setup)
      const productName = document.querySelector('.product-name')?.textContent;
      const productPrice = document.querySelector('.product-price')?.textContent;
      const price = productPrice ? parseFloat(productPrice.replace(/[^\d.]/g, '')) : 0;
      
      //Sent the EdgeTag Event 
      edgetag('tag', 'AddToCart', {
        currency: 'USD',
        value: price,
        contents: [{
          title: productName,
          item_price: price,
          quantity: 1
        }]
      });
    }
  }, true);
</script>

Step 3: Publish changes

Publish your funnel to start capturing AddToCart events from your Funnelish pages.

Code customization

The example code above may need to be modified based on your specific funnel structure. Common adjustments may include:

• Different CSS selectors for form fields and buttons

• Tracking different trigger events (clicks, changes, page scroll)

• Adjusting for different page layouts

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 Funnelish – Place code in funnel-wide or page-specific settings

• Publish and test – Deploy changes and verify events are firing correctly, refer to our validation docs for testing.

General code structure

All EdgeTag event tracking follows this basic pattern, based on your requirements for tracking events or data. Kindly adapt the JS code.

// 1. Wait for page to load (if needed)
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.