Steps to Enable Tracking Links

Tracking links are a powerful tool that allow you to track and attribute traffic generated by your partners. By providing your partners with unique URLs, you can direct traffic to specific pages on your website and accurately attribute any resulting actions (e.g., form submissions, sign-ups) to the corresponding partner. This is achieved by setting a 30-day cookie in the visitor's browser when they use the tracking link. This guide will walk you through the steps to enable this functionality.

1. Install Our Tracking Script

The first step is to install our tracking script on every page where you want to direct partner traffic. This includes landing pages, demo forms, and any other relevant pages. If the tracking script is not present on a page, no cookie will be set, and the tracking link will not function correctly.

Insert the following script in the header tag of each relevant page:

<script src="https://fce3ae0034736fb2f8d94c846392c61c.cdn.bubble.io/f1699928154923x559898613177631800/tracking.js"></script>

2. Determine How to Capture the Call to Action (CTA)

You need to decide how you want to capture the CTA on your site. There are four main options:

Connect with a native form (standard)
Connect with an embedded form (advanced)
Interact with a third party (advanced)
Handle app sign up (advanced)

Connect with a Native Form

A native form is built directly on your site without embedding or iframing additional technology. A common example is a form created in Webflow. Here are the steps to integrate our tracking functionality with a native form:

Add a Hidden Field: Add a hidden field to the form and name it eid. It is critical to set this field ID to eid for the script to function correctly.

Add the Form Script: Add the following script to the page with the form, just before the closing </body> tag:

<script>
document.addEventListener("DOMContentLoaded", function() {
  function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
    return null;
  }
  var eid = getCookie('eidCookie');
  if (!eid) {
    eid = new URL(window.location.href).searchParams.get('eid');
  }
  function setEidField() {
    var eidField = document.querySelector('input[name="eid"]');
    if (eidField) {
      eidField.value = eid;
    }
  }
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.addedNodes.length > 0) {
        setEidField();
      }
    });
  });
  observer.observe(document.body, { childList: true, subtree: true });
  setEidField();
});
</script>

Create CRM Field: Create a new field in your CRM called eid. The API value for this field must be eid. In Salesforce, this field can be on the Lead or Opportunity object. In HubSpot, this field must be on the Deal object.
Update Form Handler: Ensure that your form handler processes the form submission and passes the eid value to the newly created eid field in your CRM.
Test the Flow: To test this flow, create a tracking link in Euler for a partner and use it in an incognito browser. The cookie value will be stored in a cookie named eidCookie.

Connect with an Embedded Form (Advanced)

Connecting an embedded form can be more complex because you may need to edit the iframe code to interact with its elements. Here’s an example for a HubSpot form:

Embed HubSpot Form: Embed your HubSpot form with the following script:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script> 
<script> window.onload = function () 
  { hbspt.forms.create(
    { region: "na1", 
      portalId: "*Your portal id*", 
      formId: "*Your formID*", 
      onFormReady: function (form) { 
        var eidValue = new URL(window.location.href).searchParams.get('eid') ||
          document.cookie.replace(/(?:(?:^|.*;\s*)eidCookie\s*\=\s*([^;]*).*$)|^.*$/, "$1"); 
        if (typeof jQuery !== 'undefined') { 
          jQuery(form).find('input[id="*this is where you enter the field id*"]').val(eidValue); 
      } else { 
          var eidInput = form.querySelector('input[id="*this is where you enter the field id*"]'); 
          if (eidInput) { 
            eidInput.value = eidValue; } } } }); }; 
</script>

Handle the Form Submission: Ensure the form submission handler captures and processes the eid value appropriately, similar to the native form integration.
Create CRM Field: Create a new field in your CRM called eid. The API value for this field must be eid. In Salesforce, this field can be on the Lead or Opportunity object. In HubSpot, this field must be on the Deal object.
Update Form Handler: Ensure that your form handler processes the form submission and passes the eid value to the newly created eid field in your CRM.
Test the Flow: To test this flow, create a tracking link in Euler for a partner and use it in an incognito browser. The cookie value will be stored in a cookie named eidCookie.

Interact with a Third Party (Advanced)

In some cases, you might need to send the cookie value to a third-party site, such as Calendly. Here’s how you can do it:

Get the Cookie Value: Use JavaScript to retrieve the cookie value and append it to the URL of the button that directs traffic to the third-party site:

document.addEventListener("DOMContentLoaded", function() { 
  function getCookieValue(name) { 
    let matches = document.cookie.match(new RegExp( "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" 
    )); 
  return matches ? decodeURIComponent(matches[1]) : undefined; 
} 

  const eidCookieValue = getCookieValue('eidCookie'); 
  if (eidCookieValue) { 
    const links = document.querySelectorAll('a[href="[*this would be the URL the button is directing to*]"]'); 
    links.forEach(link => { link.href += `?eid=${eidCookieValue}`; 
    }); 
  } 
});

Parse URL Parameters on Third-Party Site: On the third-party site (e.g., Calendly), create a field that will be auto-populated based on the URL parameter.
Create CRM Field: Create a new field in your CRM called eid. The API value for this field must be eid. In Salesforce, this field can be on the Lead or Opportunity object. In HubSpot, this field must be on the Deal object.
Update Form Handler: Ensure that your form handler processes the form submission and passes the eid value to the newly created eid field in your CRM.
Test the Flow: To test this flow, create a tracking link in Euler for a partner and use it in an incognito browser. The cookie value will be stored in a cookie named eidCookie.

Handle App Sign Up (Advanced)

To track sign-ups to your product from your website, your developers need to:

Access the Cookie: Access the cookie set in the browser (named eidCookie).
Pass the Value During Account Creation: Pass the cookie value into the account creation process.
Create CRM Field: Create a new field in your CRM called eid. The API value for this field must be eid. In Salesforce, this field can be on the Lead or Opportunity object. In HubSpot, this field must be on the Deal object.
Update Form Handler: Ensure that your app processes the eid value and pass it to the newly created eid field in your CRM.
Test the Flow: To test this flow, create a tracking link in Euler for a partner and use it in an incognito browser. The cookie value will be stored in a cookie named eidCookie.

Need Assistance?

If you need help with any of these steps, please reach out to our support team. We're happy to assist with your specific use case.