Setting up event tracking with BigPicture.io is super easy, but there are still a few things that you can do to help to ensure success.

This is a follow-up of our original best practices post, but focused on development and working with your engineering team.

Use IDs for important site actions

Our point-and-click system works via CSS paths, which is a common way to uniquely identify an element within the HTML.

Here's an example of a form and the resulting CSS path for tracking the submit button.

The HTML:

<form class="my-form">  
  <div class="signup-btn"> 
    <button class="btn">Sign-up</button>
  </div>
</form>  

The CSS path:

form.my-form div.signup-btn button.btn

Now let's say you added a cancel button.

<form class="my-form">  
  <div class="signup-btn"> 
    <button class="btn">Sign-up</button>
    <button class="btn">CANCEL</button>
  </div>
</form>  

Tracking the sign-up button becomes a little harder as the CSS path now matches the cancel button as well. So the way our system handles this is to be more specific when you select the element.

The CSS path:

form.my-form div.signup-btn button.btn:nth-child(1)

This now works as our path is saying we want to track only the first button. But now what happens if we move the buttons?

<form class="my-form">  
  <div class="signup-btn">
    <button class="btn">CANCEL</button>
    <button class="btn">Sign-up</button>
  </div>
</form>  

The first button is now the cancel button, which will break our event tracking of the sign-up button.

So the best way to prevent this from happening is to give unique names / IDs for your elements. Obviously this is not feasible if you have a huge site with a ton of buttons. So we recommend doing this for at least your most important site actions, or at least better defining sections of the page.

HTML with unique names:

<form class="my-form">  
  <div class="signup-btn"> 
    <button id="signup" class="btn">Sign-up</button>
    <button id="cancel" class="btn">CANCEL</button>
  </div>
</form>  

And the resulting CSS path: button#signup

Now we can move the button anywhere on the page and everything will be fine.

Avoid using IDs like classes

IDs are designed to be unique to the page. Thus our system is optimized to specifically use IDs if they are available.

<button id="sign-up-btn">Sign Me Up!</button>  

It becomes a bit complicated though if you use the same ID elsewhere. Our system can't tell which button you want to track.

<button id="sign-up-btn">Sign Me Up!</button>

<button id="sign-up-btn">Another Button</button>  

Use classes instead for shared styling and make sure each ID is unique.

<button id="sign-up1" class="btn">Sign Me Up!</button>

<button id="sign-up2" class="btn">Another Button</button>  

Avoid mixing Javascript with HTML

Our system is optimized to handle a number of common use cases. The most common being links.

<a href="https://bigpicture.io>BigPicture.io</a>  

When you are tracking a link, BigPicture.io will automatically detect that it's a link due to the "href". Then when a visitor clicks on it, our system will pause page navigation until the event data is successfully sent to the server.

It becomes near to impossible though to handle a case like the following:

<button class="button" onclick="location.href='http://bigpicture.io'">  
  Click me
</button>  

When a visitor clicks on that button, the page will immediately navigate away and it's likely that the event data will be lost.

Avoid over complicating your HTML

Often times developers create deeply nested HTML structures, which are often not needed. Take this case for example:

<a href="https://bigpicture.io">  
  <span class="text">Sign Up!</span>
  <span class="subtext">Free trial.</span>
  <span class="hover"></span>
  <span class="active"></span>
</a>  

The developer added two extra <span> elements, presumably to handle hover and active styling. This has the potential to mess up our point-and-click system and just over complicates things.

This can be simplified in this case by handling events via CSS or JavaScript.

<a href="https://bigpicture.io" class="link">  
  <span class="text">Sign Up!</span>
  <span class="subtext">Free trial.</span>
</a>

<style>  
  .link:hover {
    color: red
  }
</style