How to send events and utm, yclid, gclid tags to nana800 analytics

What an event is made of

The call analytics.track('signup_completed', { plan: 'pro' }) sends an event named signup_completed with one property. The library adds the time, the user id and an event_id against duplicates. User properties, such as a plan or a city, are sent with identify or setUserProperties and stay on the user card: a new value of a key replaces the old one, other keys stay.

All property values are strings. Write a number as a string too, for example '1990': the greater than and less than chart conditions compare such values as numbers.

How to name events

Name events as object_action in lowercase Latin letters: page_view, signup_completed, project_created, payment_succeeded. One action must always have the same name on the site, in the app and on the server, otherwise the chart splits it into two lines.

All event names and property keys of a project are on the Data tab of the project settings, with how often they appeared and when last. You can delete an extra event there. Deleting erases every stored event with that name for good, and the web app shows their number before you confirm.

Size limits

The server does not reject an oversized event as a whole. It cuts it and adds a warning to the answer.

• One event is up to 32 KB: above that, properties are dropped from the end until it fits.
• Up to 100 properties per event, and a property value, an event name or a user id up to 1,024 characters.
• A project holds up to 10,000 distinct property keys of events and users together. New keys over the limit are not saved, the event itself is.
• One request takes up to 1,000 events with a project key and up to 1 MB. The library cuts its batches to fit.

utm, yclid and gclid tags: code for a website

Read the tags from the address when the visitor lands and keep them in the browser, because the next page will not have them. The code below puts the tags into the page view properties, remembers the last tags for key events and saves the first touch once as user properties with an initial_ prefix. The visitorId variable comes from the setup guide.

const TAGS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'yclid', 'gclid'];
const params = new URLSearchParams(window.location.search);
const campaign = {};
TAGS.forEach((tag) => {
  const value = params.get(tag);
  if (value) campaign[tag] = value;
});

if (Object.keys(campaign).length > 0) {
  localStorage.setItem('last_campaign', JSON.stringify(campaign));
  if (!localStorage.getItem('first_campaign_saved')) {
    const initial = {};
    Object.entries(campaign).forEach(([tag, value]) => (initial['initial_' + tag] = value));
    analytics.setUserProperties(visitorId, initial);
    localStorage.setItem('first_campaign_saved', '1');
  }
}

analytics.track('page_view', { page: location.pathname, referrer: document.referrer, ...campaign });

// key events carry the last tags, so a chart can split them by source
const lastCampaign = JSON.parse(localStorage.getItem('last_campaign') || '{}');
analytics.track('signup_completed', { ...lastCampaign });

nana800 keeps yclid and gclid as ordinary properties. The analytics does not send them to Yandex Metrica or Google Ads: to upload offline conversions, pass them there separately.

Tags in an app and on a server

A mobile app has no address with tags. If the app opens from a link with tags, read them from the link the same way and pass them as properties. On a Node.js server the tags arrive in the request from the site: pass them to track together with the user id as the third argument.

Charts by source

Once the tags are properties, any chart can use them.

• Split: in a series with the signup_completed event press Split by and pick utm_source. Every source becomes its own line or bar.
• Series condition: keep only the events where utm_campaign equals the campaign name and compare it with the rest.
• People filter: in a chart or on the Users page, pick the people whose user property initial_utm_source equals, for example, google.
• A click on the bar of a source opens the people who came from that ad. See the guide to chart clicks.