Setup

How to setup EngineRoom's Pixel

Overview

EngineRoom's Pixel helps you take your marketing to new heights by capturing leads on your website, integrating them into EngineRoom and calculating the attribution on them so you know exactly which marketing channels are driving leads and ROI.

Setting up the EngineRoom Pixel is a simple process that requires you to install one-line of code onto your website. If you've ever used a web analytic tracking service (like Google Analytics), then you would be familiar with this process.

Quick setup

  1. Login to your EngineRoom account

  2. In the left menu, click on Integrations

  3. Click EngineRoom Pixel

  4. Copy the setup code

  5. Paste the code snippet into the <head></head> tag of your website

    1. Note: Make sure this snippet is present on every page that you want to track

  6. Review UTM Parameters to ensure EngineRoom's Pixel is able to correctly attribute your website leads

Requirements

Currently EngineRoom's Pixel is able to capture the following types of Leads from your website:

  • Contact forms that use the <form> tag

  • Podium live chats

Compatible Form Attributes

EngineRoom's Pixel uses the name attribute on your form <input> to correctly attribute and map website leads. Because of this, to ensure the highest level of attribution accuracy, we strongly recommend that the following naming conventions are used when naming your form inputs.

Note: All names are case-insensitive.

  • Name

    • name, customer_name, form_fields[name]

  • First Name

    • first_name, first-name, firstname, form_fields[first_name]

  • Last Name

    • last_name, last-name, lastname, form_fields[last_name]

  • Email

    • email, customer_email, form_fields[email]

  • Phone

    • phone, mobile, number, form_fields[phone]

  • Message

    • message, comments, form_fields[message]

  • Postcode

    • postcode

  • Suburb

    • suburb

All other form inputs will be stored in a single data field that can be accessed accordingly.

Below is an example of a form that would map 1:1 in EngineRoom.

<form name="Contact Form">
    <input type="text" name="name" />    
    <input type="email" name="email" />
    <input type="text" name="phone" />
    <input type="text" name="message" />
    <input type="text" name="suburb" />
    <input type="text" name="postcode" />    
</form>

<form name="Services Form">
    <input type="text" name="first_name" />
    <input type="text" name="last_name" />       
    <input type="email" name="customer_email" />
    <input type="text" name="mobile" />
    <input type="text" name="comments" />
    <input type="text" name="suburb" />
    <input type="text" name="postcode" />    
</form>

Naming Conventions for Website with Gravity Form

For users integrating Pixel with Gravity Forms, name & class attributes cannot be updated against form elements. Instead, the class attribute of the parent element will be captured. Below is the documentation outlining the guidelines for identifying parent elements within Gravity Forms.

Attribute Determination Logic

We initially check if the name attribute of input elements matches certain formats tailored for Gravity Forms.

  • Examples of names that match Gravity form elements:

    • input_xx_xx

    • input_xx

Once it matches, the class name starts with er-pixel- of the parent <li> element or <div> element with class gfield will be used.

Class name for different fields:

  • Name

    • er-pixel-name

    • er-pixel-first_name

    • er-pixel-last_name

  • Email = er-pixel-email

  • Phone = er-pixel-phone

  • Message = er-pixel-message

Example HTML of <div> element with class gfield in Gravity Form:

<div id="field_14_6" class="gfield gfield--type-text gfield--input-type-text gf_left_half er-pixel-first_name gfield--width-half field_sublabel_below gfield--no-description field_description_below gfield_visibility_visible" data-js-reload="field_14_6">
  <label class="gfield_label gform-field-label" for="input_14_6">First Name</label>
  <div class="ginput_container ginput_container_text">
    <input name="input_6" id="input_14_6" type="text" value="Superman" class="large" tabindex="6" aria-invalid="false">
  </div>
</div>

er-pixel-first_name is captured as field name

Example HTML of <li> element in Gravity Form:

<ul>
  <li id="field_2_6" class="gfield gfield--type-text gfield--input-type-text gf_left_half gfield_contains_required field_sublabel_below gfield--no-description field_description_below gfield_visibility_visible er-pixel-phone" data-js-reload="field_2_6">
    <label class="gfield_label gform-field-label" for="input_2_6">First Name <span class="gfield_required">
        <span class="gfield_required gfield_required_asterisk">*</span>
      </span>
    </label>
    <div class="ginput_container ginput_container_text">
      <input name="input_6" id="input_2_6" type="text" value="Batman" class="medium" tabindex="1" aria-required="true" aria-invalid="false">
    </div>
  </li>
</ul>

er-pixel-phone is captured as field name

Blocking forms from being tracked

In the event you don't want to track a specific form, you can define a custom attribute on the <form> attribute called track-form and set its value to either 0 or false. This will tell the EngineRoom Pixel not to track these forms and they will not appear in the EngineRoom Platform.

This is particularly useful for certain CMS systems whereby search bars use the form attribute. Known systems that do this are Webflow and Shopify.

Below is an example of this.

<form name="Contact Form" track-form="0">
    <input type="text" name="name" />    
    <input type="email" name="email" />
    <input type="text" name="phone" />
    <input type="text" name="message" />
    <input type="text" name="suburb" />
    <input type="text" name="postcode" />    
</form>

<form name="Signup Form" track-form="false">
    <input type="text" name="name" />    
    <input type="email" name="email" />  
</form>

Limitations

EngineRoom is currently unable to integrate website leads that:

  • Use contact forms that are embedded in an <iframe> tag

Platform specific setup guides

If you don't see your website platform listed above, don't worry. We can still collect leads from your platform as long as you have a way to insert the EngineRoom Pixel into your website.

If you don’t want to deal with any code or ask a developer to insert the EngineRoom Pixel, you can directly add the snippet through GTM. Follow this guide on how to do it: Google Tag Manager

PreviousEngineRoom DocumentationNextWebflow

Last updated