Analytics

If you need a hand implementing this, let us know!

Events

Events allow you to track specific user interactions on your website that are unique to your business needs. These events provide insights beyond standard analytics, enabling you to understand how users engage with your website at a more granular level. Custom events are user interactions with content that can be tracked independently from the standard pageview.

Intro to Custom Event Tracking

Key Components

  1. Event Key key:
  • Purpose: This key acts as the primary label that will be displayed in our UI.
  • Usage: Choose a descriptive and recognizable key for each event, as this will be the primary identifier.
  1. Additional Event Attributes:
  • Purpose: These attributes provide extra details about the event.
  • Usage: These details allow you to filter and refine analytics data. For example, if you were tracking clicks on a social share button, you may want to additionally log which social media platform was clicked.

Example Breakdown

JavaScript

window.fullres ||= {events: []};
window.fullres.events.push({ key: 'socialShare', whichSocial: 'facebook' });

  • Initialization:

    • The first line ensures window.fullres is defined and has an events array.

  • Event Logging:

    • The second line logs the event.
    • key: 'socialShare':
      • This is the label you will see in our UI.
      • It identifies the type of event.
    • whichSocial: 'facebook':
      • This is an additional event attribute.
      • It specifies the social platform used in this event.

Practical Use

When you log an event like this, our system will display socialShare as the event label. You can then filter these events by the whichSocial attribute to see events specifically related to Facebook.

Customizing Events

Feel free to add more attributes to capture other relevant details. For example:

window.fullres.events.push({ key: 'socialShare', whichSocial: 'twitter', isLoggedIn: true });

Here, isLoggedIn is another additional event attribute you can filter by.

Summary

  • key: The main label seen in the UI.
  • Additional event attributes: Filterable details to refine your event tracking.

Verifying and Testing Custom Events

  1. Test the Implementation: After implementing the code, test it by performing the action on your website (like clicking the button or submitting the form).

  2. Check Analytics Dashboard: Log into your Analytics dashboard to ensure that the event is being captured correctly. It might take a few minutes for the event to show up in the reports.

  3. Debug if Necessary: If the event is not being tracked, recheck the code for errors, ensure that the analytics tracking code is correctly installed, and the event tracking code snippet is properly configured.

Real-world Examples

Click-based Events Example

Want to track user clicks for a specific element on the page? Here's a step-by-step:

Step 1 — Setup click event listener

In this example, we're going to track when users click .download-button elements on the page using the following demo click event listener that you could modify to your needs.

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const downloadButtons = document.querySelectorAll('.download-button');
    if (downloadButtons.length > 0) {
        downloadButtons.forEach(downloadButton => {
            downloadButton.addEventListener('click', () => {
                // Add the actual click event handling logic here
                console.log('Download button clicked!');
            });
        });
    }
});

Step 2 — Configure Fullres key event and optional attributes

Next we're going to replace the console.log with the fullres event:

JavaScript

window.fullres ||= {events: []};
window.fullres.events.push({ key: 'downloadButton' });

The key acts as the primary label that will be displayed in our UI and, for this example, we're using 'downloadButton'. Be sure to choose a descriptive and recognizable key for each event as this will be the primary identifier.

Final click-based example code:

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const downloadButtons = document.querySelectorAll('.download-button');
    if (downloadButtons.length > 0) {
        downloadButtons.forEach(downloadButton => {
            downloadButton.addEventListener('click', () => {
								window.fullres ||= {events: []};
								window.fullres.events.push({ key: 'downloadButton' });
            });
        });
    }
});

Form Submission Events Example

Want to track when users submit a specific form on the page? Follow these steps:

Step 1 — Setup form submission event listener

In this example, we're going to track when users submit the #contact-form element on the page. Again, the following code is meant to be a starting idea only and could be modified to your own requirements.

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const contactForm = document.querySelector('#contact-form');
    if (contactForm) {
        contactForm.addEventListener('submit', (event) => {
            // Add the actual form submit event handling logic here
            console.log('Form submitted!');
        });
    }
});

Step 2 — Configure Fullres key event and optional attributes

Next we're going to replace the console.log with the fullres event:

JavaScript

window.fullres ||= {events: []};
window.fullres.events.push({ key: 'formSubmission', formID: 'contactForm', formName: 'Contact Us' });

The key acts as the primary label that will be displayed in our UI. For this example, we're using 'formSubmission'.

Final form submission example code:

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const contactForm = document.querySelector('#contact-form');
    if (contactForm) {
        contactForm.addEventListener('submit', (event) => {
            window.fullres ||= {events: []};
						window.fullres.events.push({ key: 'formSubmission', formID: 'contactForm', formName: 'Contact Us' });
        });
    }
});

Additional Ideas For Inspiration

  1. Specific Button Clicks

    • Event Key: buttonClick
    • Attributes: buttonID, buttonText
    window.fullres.events.push({ key: 'buttonClick', buttonID: 'subscribeButton', buttonText: 'Subscribe'});

  2. Newsletter Subscription

    • Event Key: newsletterSub
    • Attributes: formID, formName
    window.fullres.events.push({ key: 'formSubmit', formID: 'newsletterForm', formName: 'On leave overlay modal' });

  3. Video Plays

    • Event Key: videoPlay
    • Attributes: videoID, videoTitle
    window.fullres.events.push({ key: 'videoPlay', videoID: 'introVideo', videoTitle: 'Introduction to Our Service'});

  4. File Downloads

    • Event Key: fileDownload
    • Attributes: fileName, fileType
    window.fullres.events.push({ key: 'fileDownload', fileName: 'whitepaper.pdf', fileType: 'pdf'});

  5. E-commerce Events

    • Event Key: addToCart
    • Attributes: productID, productName, quantity
    window.fullres.events.push({ key: 'addToCart', productID: '12345', productName: 'Product Name', quantity: 1});
    • Event Key: purchase
    • Attributes: orderID, orderValue, currency
    window.fullres.events.push({ key: 'purchase', orderID: '67890', orderValue: 99.99, currency: 'USD'});

  6. Error Tracking

    • Event Key: error
    • Attributes: errorMessage, errorURL
    window.fullres.events.push({ key: 'error', errorMessage: '404 Not Found', errorURL: window.location.href});

  7. User Sign Up

    • Event Key: signUp
    • Attributes: userID, userEmail
    window.fullres.events.push({ key: 'signUp', userID: 'user123'});

Frequently Asked Questions

Are these attributes fixed, meaning Fullres currently looks for these exact ones, or can they be anything?

The attributes are flexible and can be anything that makes sense for your tracking needs. You are not limited to the examples provided. For instance, you can use formClass instead of formID:

window.fullres.events.push({ key: 'formSubmit', formClass: 'signupForm', formName: 'Newsletter Signup' });