help!
Event Pixel

#What is the Event Pixel?

The Event Pixel is a feature of Knotch Measurement. It is used to signal arbitrary events and is tied to your Measurement account. The Event Pixel has a multitude of use cases including:

We actively encourage you to use the Event Pixel, it may be useful and valuable to your content marketing efforts. Please reach out to our Client Success team to see if your desired use case is possible.

#What is required to use the Event Pixel?

The only requirements are your Measurement Account ID along with the event you want to signal. If you are unsure of your Account ID, please reach out to our Client Success team. As far as the event goes, it is entirely up to you and your use case! The event itself must consist of at least one character and has no limit.

#How is the Event Pixel implemented?

The Event Pixel is invoked by making a single request to Knotch's data collection end-points. As such, it can be implemented in a variety of ways. We'll cover the three main use cases and demonstrate their use via a live example site. Keep in mind that these examples are just that.

#Inline Page Load Event Pixel with an HTML Image Element

The most basic use of the Event Pixel is to trigger the event inline HTML page load. This is achieved by using an inline <img /> HTML element. For example, consider the following HTML page: 

<!DOCTYPE html>
<html>
  <head>
    <title>Inline Event Pixel Example</title>

    <!-- Page assets included here... !-->
  </head>
  <body>
    <!-- Normal page content here... !-->

    <img src="https://t.knotch.it/receive/beacon.gif?account_id=56045b7062ec9c4e0a2b7443&event=inline_event"/>
  </body>
</html>

Wanna see it in action? Click here to see a live example.

Using this particular implementation, the Event Pixel will be triggered as soon as the visitor's web browser loads the page, triggering an event named inline_event. This means the event is fired only once at page load. Depending on the use case, this may be a sufficient implementation.

It is also possible to include a page_url when defining the HTML <img /> element. When this parameter is included, the event will be stored with this parameter's value and will be available during Event Pixel reporting. When using this parameter, we recommend setting its value to the Canonical Page URL.

#Dynamic Page Load Event Pixel with JavaScript

It is also possible to load the Event Pixel programatically using JavaScript. Similarly to how we invoke the Event Pixel at page load using an HTML <img /> element, we can invoke the pixel using a bit of JavaScript. For example, consider the following HTML page: 

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Page Load Example</title>

    <!-- Page assets included here... !-->
  </head>
  <body>
    <!-- Normal page content here... !-->

    <noscript><img src="https://t.knotch.it/receive/beacon.gif?account_id=56045b7062ec9c4e0a2b7443&event=dynamic_page_load_event"/></noscript>
    <script type="text/javascript">document.addEventListener('DOMContentLoaded', function() {
        try {
            var img = new Image();
            var canonical = document.querySelector('link[rel=canonical]');
            var src = 'https://t.knotch.it/receive/beacon.gif?account_id=56045b7062ec9c4e0a2b7443&event=dynamic_page_load_event';
            src += '&ts=' + Date.now().toString();
            if (canonical) {
              src += '&page_url=' + encodeURIComponent(canonical.getAttribute('href'));
            }
            img.src = src;
        } catch (e) {}
    });</script>
  </body>
</html>

Wanna see it in action? Click here to see a live example.

In the above example, we're able to use the DOMContentLoaded event to dynamically trigger the Event Pixel on our page. An event named dynamic_page_load_event is fired once at page load. Since we're using JavaScript, we're able to dynamically fill in the page_url using the Canonical Page URL found in the page's <link rel="canonical"> HTML element.

Notice how, with this implementation, we're using a <noscript> element as a fall back to trigger the event inline with the page. This fallback will only be triggered on clients with JavaScript disabled. Please note that the fallback is not necessary to successfully use the Event Pixel.

#Interactive Event Pixel with JavaScript

Building upon the prior example, we can invoke the Event Pixel when a visitor interacts with some component of the page via JavaScript. This is particularly useful when tracking multi-step site experiences or conversion events. A given web page can have multiple Event Pixels present. For example, consider the following web page: 

<!DOCTYPE html>
<html>
  <head>
    <title>Interactive Event Pixel Example</title>

    <!-- Page assets included here... !-->
  </head>
  <body>
    <!-- Normal page content here... !-->

    <a href="/path/to/download?file=whitepaper.pdf" onclick="javascript:invokeKnotchEventPixel('interactive_download_event');">
      Download Whitepaper
    </a>

    <a href="/path/to/content_form" onclick="javascript:invokeKnotchEventPixel('interactive_contact_event');">
      Contact Us
    </a>

    <script type="text/javascript">function invokeKnotchEventPixel(eventName) {
        try {
            var img = new Image();
            var canonical = document.querySelector('link[rel=canonical]');
            var src = 'https://t.knotch.it/receive/beacon.gif?account_id=56045b7062ec9c4e0a2b7443&event=' + eventName;
            src += '&ts=' + Date.now().toString();
            if (canonical) {
              src += '&page_url=' + encodeURIComponent(canonical.getAttribute('href'));
            }
            img.src = src;
        } catch (e) {}
    }</script>
  </body>
</html>

Wanna see it in action? Click here to see a live example.

This is perhaps the most versatile use of the Event Pixel. This example is able to trigger two events when a visitor clicks on either the "Download Whitepaper" or "Contact Us" anchor elements. These events are named interactive_download_event and interactive_contact_event.

In the above example, for simplicity's sake, we're using inline HTML event triggers. These can easily be replaced using JavaScript event binding. Depending on the use case, you may or may not want the event to be invoked more than once per session.

Furthermore, the Event Pixel can be implemented using Event Delegation. For example, consider the following web page: 

<!DOCTYPE html>
<html>
  <head>
    <title>Interactive Event Pixel Example</title>

    <!-- Page assets included here... !-->
  </head>
  <body>
    <!-- Normal page content here... !-->

    <button id="download">
      Download Whitepaper
    </button>

    <button id="contact">
      Contact Us
    </button>

    <section>
      <p>Sign up for our newsletter by filling out the form below.</p>
    </section>

    <form id="test_form">
      <div>
        <label>email:</label>
        <input type="text">
      </div>
      </br>
      <button>Submit</button>
    </form>

    <script type="text/javascript">function invokeKnotchEventPixel(eventName) {
      try {
        var img = new Image();
        var src = "https://t.knotch.it/receive/beacon.gif?account_id=5bfc3c686cf0d1e816e72849&event=" + eventName;
        src += "&ts=" + Date.now().toString();
        img.src = src;
      } catch (e) {}
    }

    document.body.addEventListener('submit', function(e){
      if (e.target.id === 'test_form') {
        invokeKnotchEventPixel('submit_form');
      }
    });

    document.body.addEventListener('click', function(e){
      if (e.target.tagName == 'BUTTON') {
        // Invoke Knotch event pixel using the button's ID attribute
        invokeKnotchEventPixel(e.target.id);
      }
    });
  </body>
</html>

Wanna see it in action? Click here to see a live example.

Keep in mind the above JavaScript snippets are just examples. The Event Pixel can be implemented in an interactive using JavaScript that is very different than the above code. We're merely trying to convey the concept with this code and example. Please reach out to our Client Success team if you have any questions.