Go to rebrand

UserDB

Fingerprinting

When ca_styleguide_fp.js is loaded, the information is collected and sent to an API endpoint.

For fingerprinting to work properly, make sure to include ca_styleguide_fp and ads.js into the page:

<script src="{{ static("js/ads.js") }}"></script> <script src="{{ static("js/ca_styleguide_fp.js") }}"></script>

Events Tracker

We can track events run by the user and send them to BE through ca_styleguide_uapi_critical.js.

To track events you need to load the ca_styleguide_uapi_critical.js script on your page.

<script src="{{ static("js/ca_styleguide_uapi_critical.js") }}"></script>

If you want to use the scroll tracker you will also need to include the non critical chunck:

<script src="{{ static("js/ca_styleguide_uapi_non_critical.js") }}"></script>

All the events should be dispatched according with the expected schema for the event type.

Important note/recommendations for tracking links and clicks:

  • Link that go to internal pages (when there is not a target="_blank"): You must use link-tracker approach.
  • Link that go to external pages (when there is a target="_blank") or links that do not change the current page (hashed links #hash): You must use data-uapi-event approach.
  • Behaviors that needs to be tracked through the code: You must dispatch manually on the JS code using the custom event approach.

If you have any questions about the correct schema to track any element type, you can consult the schemas file.

Click Events

To track the click event add an attribute data-uapi-event to the element with an object according with the expected schema for the action executed.

Required attributes: element and type.

Values allowed for type: 'modal', 'call', 'link', 'anchor'.

Example

<a class="ca-btn" data-uapi-event='{"element":"button", "type": "link"}'>Click here</a> Click here

Check if a request to https://www.consumeraffairs.com/api/userapi/events/ was sent with:

{ "name": "cta-click", "data": { "element": "button", "type": "link" } }

Social

To track the clicks on social links you should set the attribute data-uapi-event-name as social.

site and type are required.

Values allowed for type: 'visit' or 'share'.

<button class="ca-btn" data-uapi-event-name="social" data-uapi-event='{"site": "facebook", "action": "share", "type": "visit"}'>Click here</button>

Check if a request to https://www.consumeraffairs.com/api/userapi/events/ was sent with:

{ "name": "social", "data": { "site": "facebook", "action": "share", "type": "visit" } }

With a custom name

To track the click event and send a custom name add the attribute data-uapi-event-name to the element with an name according with the expected schema.

<a class="ca-btn" data-uapi-event-name="page interaction" data-uapi-event='{"element": "custom_link", "type": "link"}'>Click here</a> Click here

Check if a request to https://www.consumeraffairs.com/api/userapi/events/ was sent with:

{ "name": "page interaction", "data": { "element": "custom_link", "type": "link" } }

The click tracker is available on the window object as CAUApiEvent, this way is possible to bind elements sending an specific container in case of page changes dynamically.

window.CAUApiEvent.refreshTargets(container);

Ping Tracker/Time on page

This allows us to track the time users spend on our pages based on a "ping" approach, this ping help us understand when the user is really active on the site.

The current criteria for the ping to be executed is when:

  1. Page Loads
  2. Tab is active and a ping is sent
  3. A ping is sent every 15 seconds for 6 times after the events above are executed
  4. A ping is sent every 60 seconds after the first 6 pings

Observations:

  • If a user leaves the browser tab, the timer that dispatches the pings stops. The timer cycle is only valid when the user is on the page (tab is active).
  • Every time the browser tab is active (first time or after an inactive period) a ping is sent. Only after that, the timer (15s or 60s) takes place.
  • If a user closes the tab and opens the page again, the whole process is restarted: initial ping, a ping each 15s for 6 times, and then a ping each 60s.
  • Once the ping interval is changed to 60s, after the first 6 pings, it will not go back to the 15s interval on tab switch (inactive to active).

The correct payload for this event is:

{ "category": "metrics", "name": "ping, "data": {} }

Link Tracker

Allows us to track clicks that were executed under link elements.

How it works:

When clicking a link it'll save the relevant information in localStorage under the key trackedCTALink. It will store all the relevant information in a stringified object in the localStorage, the element label is taken from data-uapi-link.

After clicking the CTA the user goes to another page, when s/he arrives in the next page the information stored in the localStorage key will be used to send useful information to userDB about the element the user has clicked, If the localStorage key has been stored for more than 2 minutes we'll mark it as invalid and delete it without sending information to userDB.

Payload { "category": "page interaction", "name": "cta click", "data": { "element": {ELEMENT_IDENTIFIER}, "type": "ca", "id": {OPTIONAL_ELEMENT_ID}, "position": {OPTIONAL_ELEMENT_POSITION}, "context": {OPTIONAL_CONTEXT_INFO}, "raw_path": {PATHNAME + QUERYSTRING OF CTA CLICK PAGE}, "path": { PATHNAME CTA CLICK PAGE }, "target_url": { HOST + PATHNAME OF THE PAGE THE CTA IS TAKING YOU TO }, "referer": { URL OF PAGE THAT TOOK YOU TO THE CTA PAGE }, "querystring": { QUERYSTRING CTA CLICK PAGE }, } "ts": "YYYY-MM-DDTHH:MM:SS.fZ" }

This is the only tracker that send TimeStamp(ts) on the payload. It's necessary to send a specific timestamp for an event that was previously stored in the browser, not just the time that made the API call.

Usage: <a data-uapi-link="unique_identifier" href="/">Link Tracked</a> Example:

Click the element below and check how it adds a key to localStorage on mousedown event, then when you arrive at the next page in this case the index page it'll remove the key or mark it as invalid depending on the time it took.

Link Tracked

Usage with extra data:

You can also send extra data like, position, id, context by making use of the key data-uapi-link-payload like below:

<a data-uapi-link="unique_identifier" href="/" data-uapi-link-payload='{"id": 2, "position": "header", "context": {"key": 1}}'>Link Tracked</a> Result: Link Tracked

Scroll tracker

The scroll tracker returns an accurate scroll depth (by sections) for all user pageviews during their session.

To track the scroll you need to add the attribute data-uapi-scroll to each element that you want to know if was visualized by the user.

When the user visualizes the section, the script sends a request to UserDB API.

<section data-uapi-scroll="Section 1"> Section 1 </section>

Example

Section 1
Section 2

Zendesk tracker - Experiment

The Zendesk tracker listens to user events (open and close) on Zendesk chat.

The user interactions are tracked when Zendesk and ca_styleguide_uapi.js are present on the page.

Custom Zendesk Snippet

This custom snippet includes the Zendesk script on the page and dispatches a custom event right after it's loaded.

Unminified
function initZendeskChat() { var trackToGa = function (eventName) { if (window.dataLayer && eventName) { var obj = { event: eventName } window.dataLayer.push(obj); } } var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://static.zdassets.com/ekr/snippet.js?key=1f19b3d0-e746-426f-aefe-a7e6315a1d43'; script.id = 'ze-snippet'; document.body.appendChild(script); script.addEventListener('load', function() { var e = new Event('com.consumeraffairs.uapi.zendeskLoaded'); window.dispatchEvent(e); zE('webWidget:on', 'chat:start', function () { trackToGa('zendesk_conversation'); }); }); window.zESettings = { webWidget: { color: { launcherText: '#ffffff', theme: '#1091CC' }, position: { horizontal: 'right', vertical: 'bottom', }, offset: { mobile: { horizontal: '-30px', vertical: '35px', } } } }; }; initZendeskChat();
Minified
function initZendeskChat(){var e=document.createElement("script");e.type="text/javascript",e.src="https://static.zdassets.com/ekr/snippet.js?key=1f19b3d0-e746-426f-aefe-a7e6315a1d43",e.id="ze-snippet",document.body.appendChild(e),e.addEventListener("load",function(){var e=new Event("com.consumeraffairs.uapi.zendeskLoaded");window.dispatchEvent(e),zE("webWidget:on","chat:start",function(){!function(e){if(window.dataLayer&&e){var t={event:e};window.dataLayer.push(t)}}("zendesk_conversation")})}),window.zESettings={webWidget:{color:{launcherText: '#ffffff',theme:'#1091CC'}, position:{horizontal:"right",vertical:"bottom"},offset:{mobile:{horizontal:"-30px",vertical:"35px"}}}}};initZendeskChat();

Demo

Visibility Tracker

This tracker is to determine if an element has been viewed, the event will be fired when 70% of the element intersects the viewport.

To track the visibility you need to add the attribute data-uapi-visibility to each element that you want to know if it will be visualized.

The script will send a request to UserDB API recording the attributes sent.

Usage

<div data-uapi-visibility='{"element":"text", "id": "anchor", "position": 1, "order": 1}'></div>

Example

const payload = { name: 'visibility tracker', data: { "element": {ELEMENT_IDENTIFIER}, "id": {OPTIONAL_ELEMENT_ID}, "order": {OPTIONAL_ELEMENT_ORDER}, "position": {OPTIONAL_ELEMENT_POSITION}, } }
Send UserDB request once at this point since 70% of the element is visible

Custom events tracker

To send custom events to UserDB tracker you just need dispatch a custom event called com.consumeraffairs.uapi with the desired payload as event detail.

If the event name is not in place the name will be custom event.

The data schema should set inside a data object.

const payload = { name: 'cta click', data: { element: 'element_label', type: 'link', }, } const event = new CustomEvent('com.consumeraffairs.uapi', { 'detail': payload }); window.dispatchEvent(event);

Example

Click on the button bellow and check if the custom event payload was sent to UserDB API.

Components that are using the custom event tracker:

Component
Email Marketing
Expander/Collapser

Carousel tracker

You can send Carousel information to UserDB through the following attributes:

Property Description Options
data-uapi-carousel-name Defines the name of element submit | view | match | no_match
data-uapi-carousel Defines the carousel information '{"element": "carousel_name", "type": "carousel", "context": { "template": "template_name", "config": "config_name" }}'

Example

<div class="ca-carousel"> <div class="js-step-container" data-uapi-carousel-name="view" data-uapi-carousel='{"element": "carousel_name", "type": "carousel", "context": { "template": "template_name", "config": "config_name"}}' > <div class="js-step ca-carousel__step ca-carousel__step--active"> <button class="js-first-step">First</button> <button class="js-prev-step">Previous</button> <button class="js-next-step">Next</button> <button class="js-last-step">Last</button> </div> <div class="js-step ca-carousel__step"></div> </div> </div>
Payload:

Category will be set accordincly with the type, carousel will have page interaction and multi_step will have form interaction.

{ category: 'form interaction', name: 'submit | view | match | no_match', data: { element: 'carousel_name', type: 'carousel | multi_step' context: { template: template_name config: config_name step: 1 | 2 | 3 | 4 } } }