# 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

<figure><img src="/files/9jZGvxr5h42XDWIrcZQV" alt=""><figcaption></figcaption></figure>

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

```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
* 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.&#x20;

### 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.&#x20;

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

```html
<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.&#x20;

{% hint style="info" %}
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.&#x20;
{% endhint %}

> Need help with third-party forms or for tracking other events? Contact our team on [Slack ](https://join.slack.com/t/blotout-shared/shared_invite/zt-3gpja9dut-vQ4enN3EcGRg~q5roDAlmg)for questions.

### Possible customization&#x20;

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&#x20;
* 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](https://docs.edgetag.io/implementation/validation) 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.&#x20;

```javascript
// 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,](https://join.slack.com/t/blotout-shared/shared_invite/zt-3gpja9dut-vQ4enN3EcGRg~q5roDAlmg) Our team can 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/webflow.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.