ActiveCampaign (Forms) + FunnelFlux

What is ActiveCampaign?

ActiveCampaign is an integrated email marketing, marketing automation, and small business CRM software.

How do we get started integrating FunnelFlux with ActiveCampaign?

Let’s focus only on the ActiveCampaign Forms where we will be passing FunnelFlux variables.

Let say you have an opt-in form where you want to gather details from your customers or visitors.

First, you need to add some important FunnelFlux parameters as fields to your ActiveCampaign form.

To add this a field, navigate to ActiveCampaign Form > Manage Fields.

Then add these three variables flux_vid , flux_sess , and flux_hid as a hidden field .

• flux_vid , this will be your variable to store the FunnelFlux Visitor ID, which is used to track lifteime value across funnels

• flux_sess , this allows continuing a user’s journey within a funnel without relying on cookies (it is actually the parameter we store in cookies)

• flux_hid , this will be the current node’s hit-id. If the current node is an offer, this is the ID we use to trigger a conversion

Once you have set the fields in ActiveCampaign you can now create your form, then make sure to add the hidden fields to it:

You can add as many fields as you want but those three fields should be enough for FunnelFlux tracking.

Once, your ActiveCampaign form is configured, you can start to integrate your form on your Lander/Offer page.

Make sure to select “Full Embed “ as this will allow our next step to update the form hidden field values. Put this form code on your lander wherever you need it.

You have set-up your ActiveCampaign form, now what?

We will need to add the FunnelFlux javascript to your Lander/Offer page.

First, create a Funnel if you don’t have one, then inside your Funnel, there is an option “Advanced Settings”

Click to expand this area and you should to see the Funnel’s Organic Tracking JS.

Copy the FunnelFlux tracking JS onto your lander/offer page before the closing tag.

Final steps

We will need to add a few lines of code to your FunnelFlux JS.

But before adding this new code, we need to identify the class names of the hidden fields in your ActiveCampaign form.

Here is a snippet of the partial form code, yours might be different:

<div class="_form_element _x66225497 _full_width">

  <label class="_form-label">Full Name</label>

  <div class="_field-wrapper">

    <input name="fullname" placeholder="Type your name" type="text">

  </div>

</div>

<div class="_form_element _x62056316 _full_width">

  <label class="_form-label">Email*</label>

  <div class="_field-wrapper">

    <input name="email" placeholder="Type your email" type="text">

  </div>

</div>

<div class="_form_element _field17 _full_width">

  <input name="field[17]" type="hidden" value="">

</div>

<div class="_form_element _field18 _full_width">

  <input name="field[18]" type="hidden" value="">

</div>

<div class="_form_element _field20 _full_width">

  <input name="field[20]" type="hidden" value="">

</div>

<div class="_button-wrapper _full_width">

  <button class="_submit" id="_form_7_submit" type="submit">Submit</button>

</div>

Let’s just focus on this part of the form:

<div class="_form_element _field17 _full_width">

  <input name="field[17]" type="hidden" value="">

</div>

<div class="_form_element _field18 _full_width">

  <input name="field[18]" type="hidden" value="">

</div>

<div class="_form_element _field20 _full_width">

  <input name="field[20]" type="hidden" value="">

</div>

See this example below – we want to make things easier by adding an ID to denote what field is this for. For example, if this field 17 is actually for flux_hid, as configured in ActiveCampaign, I will add that as an ID:

<input type="hidden" name="field[17]" value="" />

change to:

<input id="flux_hid" type="hidden" name="field[17]" value="" />

The current Form integration code will look like this if an ID’s where added:

<div id="flux_hid" class="_form_element _field17 _full_width">
  <input name="field[17]" type="hidden" value="">
</div>
<div id="flux_sess" class="_form_element _field18 _full_width">
  <input name="field[18]" type="hidden" value="">
</div>
<div id="flux_vid" class="_form_element _field20 _full_width">
  <input name="field[20]" type="hidden" value="">
</div>

It’s up to you to label these fields correctly, but let us know if you need help.

Now we can update the FunnelFlux JS to retrieve all these values, so that we can use them on the page and inject them into the form’s hidden fields.

Here’s what your FunnelFlux JS will look like initially:

fflux.track({
    timeOnPage: false,
    timeOnPageResolution: 3000,
    noCookies: true,
    tokenInjection: {
      intoUrl: false,
      intoForms: { selector: null },
      intoLinks: { selector: null },
      tokens: {}
    }
});

Update this to:

fflux.track({
    timeOnPage: false,
    timeOnPageResolution: 3000,
    noCookies: true,
    tokenInjection: {
      intoUrl: false,
      intoForms: { selector: null },
      intoLinks: { selector: null },
      tokens: {
            flux_sess: '{session-id}',
            visitor_id: '{visitor-id}',
            hit_id: '{hit-id}',
      }
    }
});

As you can see, we have asked the JS to return session, visitor and hit ID within the tokens part.

Now we will use the data from the FunnelFlux Javascript to update the hidden fields.

Add this code before the tag of your lander/offer page.

<script type="text/javascript">

window.addEventListener("message", function(e) {

  if (e.data.ok && e.data.frameId == '_ffq_track_') {

    document.getElementById("flux_hid").value = e.data.flux_inject.tokens.hit_id;

    document.getElementById("flux_sess").value = e.data.flux_inject.tokens.flux_sess;

    document.getElementById("flux_vid").value = e.data.flux_inject.tokens.visitor_id;

  }

}, false);

</script>

What does this script do? It “listens” for the response from our Javascript tracking – so its important this code is placed before the FunnelFlux tracking JS.

When the Javascript returns values for hit ID, session ID and visitor ID, it finds the hidden fields by the IDs you added earlier and updates them to hold these values.

Boom! You have now injected FunnelFlux tracking data into your hidden custom fields. When the user submits the form they will be captured.

Later, when you send emails, you can append ..&flux_sess=%FLUXSESS%... (for example) to your links to continue the user’s session, or visitor ID to link revenue across funnels.

Remember the fields you have added create those fiels on the user, so in later emails you can inject that data back into text/links using the ActiveCampaign tokens.