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

<figure><img src="/files/OXN5fXRquARuVjo8fzVI" 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

### 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 Cod**e or **Global Scripts** section
3. Refer to 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>

```

4. **Replace** 'REPLACE\_WITH\_YOUR\_EDGETAG\_URL' with your actual EdgeTag domain URL from your Blotout EdgeTag Dashboard.&#x20;
5. 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.&#x20;

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

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

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

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

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

```javascript
// 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: '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/funnelish.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.