Back to Docs

Webflow

We are big fans of Webflow at Variance and have done a lot of work to get our website sending valuable events that we can use to help sell and grow customers. To help make that process easier, we have documented an easy way to integrate Variance.js, Segment, RudderStack, or any other CDP with Webflow. This allows you to add a simple HTML attribute to any element (`data-event-name`) rather than having to hand code events.

Loading Your Library

The first thing you need to do is install your javascript snippet into the `<head>` tag of your Webflow site. You can do that in your project settings under Custom Code. You'll want to add the variance.js/Segment/RudderStack snippet into the Head Code box.

Adding Event Capture Javascript

Within that same Custom Code are you'll now want to add an additional snippet to the Footer Code section. This snippet will allow you to capture any click or form events you want. Since Webflow automatically loads jQuery, this utilizes the library. Here is the code, if you are using Segment, simply replace `variance.` with `analytics.` and you'll be good to go.

(function ($, variance) {
  var reservedTraits = [
    "address",
    "age",
    "avatar",
    "birthday",
    "company",
    "createdAt",
    "description",
    "email",
    "firstName",
    "gender",
    "id",
    "lastName",
    "name",
    "phone",
    "title",
    "username",
    "website",
  ];

  $("[data-event-name]").click(function () {
    var traits = {};

    var $this = $(this);
    var data = $this.data();
    var properties = $.isPlainObject(data.eventProperties)
      ? data.eventProperties
      : {};

    if ($this.is('[type="submit"]')) {
      $($this.closest("form").get(0))
        .find("input[name]")
        .each(function () {
          var $inputField = $(this);
          var inputName = ($inputField.attr("name") || "").toLowerCase();
          if (!inputName) return;
          properties[inputName] = $inputField.val();
          if ($.inArray(inputName, reservedTraits) > -1) {
            traits[inputName] = $inputField.val();
          }
        });
    }

    if (data.includeId && !$.isEmptyObject(traits)) {
      variance.identify(traits);
    }

    variance.track(data.eventName, properties);
  });
})(jQuery, window.variance);

What does this do? Most simply it looks for the attribute `data-event-name` on any clicked HTML element. If it finds that attribute, it will generate an event. It does a few additional things (like check for reserved traits and makes sure the capitalization is consistent), but the core of it is explained in the next section.

Using Email as User ID

Sometimes it's easiest to use email addresses as User ID for tracking. If you want to do that, simply adapt this part of the snippet to send email as `userId`:

if (data.includeId && !$.isEmptyObject(traits)) {
    variance.identify(traits.email, traits);
}

Capturing Click Events

From there, capturing interactions are easy. Simply go into any HTML element you want to track clicks for, go to the Element Settings menu (the little gear on the top right), and add a Custom Attribute with the name `data-event-name` and the value of whatever you want to call the event (we recommend the noun-verb structure).

You'll find the Custom Attributes menu about 3/4 of the way down.

Once you click the + button it will bring up this simple form with two boxes for the Name and Value:

If you have any additional properties you want to capture, you can do that too by adding a seperate `data-event-properties` attribute. Please note: you must use double quotes (`"`) and not single quotes with your properties.

Capturing Form Events

The capture snippet above should automatically handle any Forms as long as you add a `data-event-name` attribute to the Submit button. This should work exactly the same as any other element.

Just add `data-event-name` to the Submit button

Last Updated:

February 15, 2022

Getting Started

Product Basics

Integrations & APIs

Legal & Privacy

What's New?

What's New?

Back to Docs

On This Page

Back to Docs

Webflow

On This Page

Loading Your Library

Adding Event Capture Javascript

Using Email as User ID

Capturing Click Events

Capturing Form Events

Getting Started

The Basics

Integrations & APIs

What's New?

The System for Growth

Resources

Company

Integrations

Follow Us