Webflow

Follow this guide to implement EdgeTag tracking on your Webflow site 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:

Paid Webflow Site Plan – Custom code features require a paid plan

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 tracking requirements.

Initialize EdgeTag (Site-Wide Setup)

This initialization enables PageView tracking across your entire Webflow site.

Step 1: Access Webflow custom code settings

• Navigate to Project Settings in your Webflow dashboard

• Click on the Custom Code tab

Step 2: Add EdgeTag initialization script

• In the Head Code 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

• Click Save Changes

Step 3: Publish your site

• Publish your Webflow site to make the changes live

• PageView events will now be tracked automatically on all pages

Track additional events

Beyond PageView tracking, you can capture specific user actions such as form submissions, button clicks, and other interactions.

Choose your implementation scope

Site-Wide Tracking: Add code to Project Settings → Custom Code (applies to all pages)

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

Let's take an example of a page-specific event and data tracking.

Example: Tracking lead capture from Email submission

This example demonstrates how to track email submissions as Lead events on a specific page. Along with the Lead event, we are also sending the email data, as an example.

Step 1: Navigate to page settings

• Open the page containing your email input

• Click the Pages Panel (on the left sidebar)

• Click the gear icon next to your page name

• Go to the Custom Code section

Step 2: Refer lead tracking script

In the Head Code section, add the following script:

<script>
document.addEventListener(
    'submit',
    (event) => {
      // Find the email input field in the submitted form or input field 
      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 site to start capturing Lead events from email inputs / simple forms.

Note: This code snippet does not work with Third-party embedded forms (HubSpot, Typeform, etc.) or content inside iframes. Kindly make the edits based on your requirements.

Need help with third-party forms or for tracking other events? Contact our team on Slack for questions.

Possible customization

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

• Different input field selectors (e.g., input[name="email"] instead of input[type="email"])

• Tracking different trigger events (clicks, changes, etc.)

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, scroll depth, video play, 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') along with the Data tag wherever required. Kindly refer to our implementation documentation

• Add to Webflow – Place code in site-wide or page-specific custom code sections

• 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. Kindly refer to this to implement the event tracking from your Webflow sites.

// 1. Detect user action
document.querySelector('.your-element').addEventListener('click', 
function() {
  // 2. (Optional) Capture additional data
  edgetag('data', { 
    key: 'value',
    customField: 'customValue' 
  });
  // 3. Tag the event
  edgetag('tag', 'EventName');
});

Need custom implementation?

Contact EdgeTag support on Slack, Our team can help with code customization and implementation support.