Skip to main content

Tracking events

A event is a user interaction in your website. We collect various events automatically as the user navigate through out your website.

Auto-collected events#

  • Page View and Page Close events are automatically collected as navigates through your website. This also works for Single Page Applications that use client side routing, with history.pushState and hash based routing.

  • You can configure to track certain interactions like clicking buttons or links, submitting forms, watching videos, from the GingerTag dashboard without writing any additional code.

But in some cases you need to send custom events to track user interactions. You can do this in two ways:

Using data-attribute#

You can track interaction on HTML elements in your website by adding data-gt-event and data-gt-trigger attributes.

If the element trigger the configured data-gt-trigger event, an event with the name data-gt-event is captured.

Examples:

<!-- Track form submissions -->
<form id="contact-form" data-gt-event="Submit contact form" data-gt-trigger="submit">
...
</form>
<!-- Track clicks -->
<div
class="share"
data-gt-event="Share article"
data-gt-trigger="click"
>
Share
</div>

While the above two are possible by creating from dashboard, you can choose to do it during development time. You can also use triggers other than click and submit if needed.

Using Javascript function#

You can call the event function in the gingertag global Javascript object, to send custom events.

window.gingertag.event('Survey Completed');

You can also send additional data with the events like:

window.gingertag.event('Intro Wizard Progress', {
stepNumber: 2,
stepName: 'Choose your package',
value: 10,
});

You can see metrics on the event data in the GingerTag dashboard when you select a specific event. You can send any key value pair as event data, and not restricted to just Category, Action, Label and Value like in Google Analytics.

You can also send nested objects. However we store and report them in flattened format.

Example:

window.gingertag.event('Select Plan', {
plan: {
name: 'Starter',
limit: 5000,
}
value: 10,
});

In the dashboard you will see event data keys as plan.name, plan.limit and value.

Value key#

If an even has a value key in the data, they are stored and displayed separately in the dashboard. You can get metrics Total value, Average value in the dashboard.

This can be used to track a monetary value on events like Order placed.