Overview: 


The Dovetale Tracking Pixel was built with the intention to help answer a common question when brands work with influencers: "How much traffic did this influencer drive to my website, and how many people from that traffic made it to the shopping cart?"


The Dovetale Tracking Pixel feature is only available for Customers who use MikMak and Adimo.


How it works:


  1. Sign up to Dovetale or log in using your email and password!
  2. Go to the Lists feature on Dovetale
  3. Add the Pixel Tracking Column to any List you've created - if you don't know how to "Add a Column" to your Lists, please see this guide for instructions!
  4. Once the Pixel Tracking Column has been added to your List, you'll notice that a Pixel ID has already been created for you! Each one of these pixel ID's is uniquely attributed to creator row (also known as Influencers, KOL's, etc.) in your List. 
  5. Consult an engineer on your team to implement the <img> tag in your Pixel ID column to measure the events on your website as they take place! 



Column & Tracking Support


Dovetale Pixel Tracking can be used for a variety of tracking methods! 

  • Page Loads - Use your unique Pixel ID generated for each creator in the Pixel Tracking Group on any List 
  • Add to Cart (Cart Tracking) - add "?event_type=add_to_cart" to your unique Pixel ID



Implementation


To implement pixel tracking, you can add a single <img> tag to the markup of your website with a link that uses the Pixel ID for the creator you are interested in.


The src attribute of the <img> tag should be formatted as follows:

An example <img> that you would place in the markup of your website to track an "Add To Cart" event would look like this:


<img height="1" width="1" style="display:none" src="<https://dttrk.com/pixel/784e6454-8c63-44c5-89db-6dcd33abcdef/event.gif?event_type=add_to_cart>"/>


Pixel Tracking currently supports these event types:
  • page_load
  • add_to_cart


If you want to track additional event types, Contact Us and we can add new event types


Use Case

A common use case is to give a URL to a creator to promote a product or specific page of your website.

To track the traffic and events driven by this specific creator, you can add their unique pixel ID as a parameter on the URL. When customers visit this URL, you can use this parameter to dynamically format the src attribute of the <img> tag.


For example, MikMak is one of our partners that provides brands with a swipe up links so that users can shop directly from swiping up on an Instagram story. A MikMak link for a specific creator might look like this:


When a user swipes up and visits this URL, MikMak will dynamically generate an <img> tag for their response using the dt_pixel_id parameter in the link above. The <img> tag will look similar to our first example:


<img height="1" width="1" style="display:none" src="<https://dttrk.com/pixel/784e6454-8c63-44c5-89db-6dcd33abcdef/event.gif?event_type=page_load>"/>


This same approach can be implemented on your own website to track traffic at the individual creator level. The approach can be summarized in two steps:


  1. When providing a link to a creator, add a dt_pixel_id parameter with their unique pixel ID that you can copy from your Dovetale list.
  2. When users hit this link, take the dt_pixel_id from the URL parameters and dynamically generate an <img> tag that should be placed anywhere in your response.



Dynamically creating image tags

A common approach for dynamically generating the image tag is to use javascript to parse the pixel id from the header.


For example, if the url shared for your page looks something like this:

https://www.mywebsite.com/mypage?dt_pixel_id=6cfa53b6-567c-4c88-916abc


Then you can dynamically load the img on your page like this:

<script>
  const img = document.createElement('img');
  const pixelId = window.location.search.match(/dt_pixel_id=([a-zA-Z0-9\-]*)/);
  if (pixelId){
    img.src = `https://dttrk.com/pixel/${pixelId[1]}/event.gif?event_type=page_load`;
    document.body.appendChild(img);
  }  
</script>


How are events tracked?

An event is logged when a GET request is made to the unique url for the pixel and event_type (ie. https://dttrk.com/pixel/{pixel_id}/event.gif?event_type={event_type})


The GET request can be made directly from your application or, more commonly, it can be loaded by setting the src of an img tag:

<img height="1" width="1" style="display:none" src="https://dttrk.com/pixel/784e6454-8c63-44c5-89db-6dcd33abcdef/event.gif?event_type=page_load"/>


If the img tag approach is used, the GET request will only be made on the initial load of the image, as the image will be cached on the browser on subsequent loads of the same page. This means the event is essentially recorded once per unique combination of user,  pixel id and event type. If you want to count the event for each time page is loaded in stead of once per session, there are multiple ways to avoid browser caching for images explained here: https://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url


If the GET request is made by the application directly, an event will be counted for each request made.


What data is collected?

While more data is available on the Adimo and MikMak dashboards, Dovetale will report back how much traffic the influencer drove to the website, and how many people from that traffic made it to the shopping cart. It is our recommendation to get all of the available data points from Adimo or MikMak.


What is the setup process?


Our recommendation is to start with MikMak or Adimo. From there you can use our generated pixel and support from the respective teams to embed the Pixel on each page.


Does a tracking pixel per influencer need an equivalent pixel to be embedded in the client's site?

Since MikMak and Adimo are creating a new page for each influencer (with the embedded pixel) you will just need to coordinate the correct link with each individual influencer.