Tag Manager

Inject code directly on your website without requiring engineering support

By using our Tag Manager feature, you can inject code into your website. To add or edit code snippets, you should go to the Projects Page, and click the settings button for the project you want to inject code onto.

To use this feature, you must add the unsafe-eval expression to your Content Security Policy.

On Initial Page Load:

Code injected here will be triggered when your website is first loaded. This is similar to a DOMContentLoaded event, except we call it a little later, once Freshpaint is loaded. A common use case for this is attaching user properties or event properties with dynamic properties that are only available after page load.

Important: When using event listeners in custom code, be aware that Freshpaint loads asynchronously. One-time events like window.load or DOMContentLoaded may have already fired before your code executes.

On Page Change:

Code injected here will be triggered each time a page is loaded. This includes the initial page load event, but also any subsequent page changes within a single page app. This is often used for attaching page view properties within single page apps.

On Identify

Code injected here will be triggered each time freshpaint.identify() is called. You will have access to two variables, userID and userProps. These variables will take on the values of the unique_id and properties arguments of freshpaint.identify().

The values of the userID and userProps variables can be null if no userID or no user properties are passed into freshpaint.identify().

Code injected by On Identify is most often used to build custom javascript integrations by passing identity information from Freshpaint to a javascript SDK.

On Track

Code injected here will be triggered each time freshpaint.track() is called. You will have access to - eventName, eventProperties, builtinProperties and eventOptions. The variables eventName, eventProperties and eventOptions will take on values as they were passed to freshpaint.track.

eventName will be the name of the event as a string.

eventProperties will be an object with event properties as key, value pairs.

eventOptions will only be present in manual/precision track calls, and it will be the third parameter passed in, which is usually used to control which destinations an event is sent to.

builtinProperties will contain the properties that Freshpaint automatically captures for each event. It is populated for autotrack events.

Sample value of builtinProperties for an autotrack event

{
  time: 1660750813.235,
  $device_id: "182a231fdd1c09-0b27ca77a82ebd-1b525635-4da900-182a231fdd2da7",
  $user_id: "[email protected]",
  $os: "Mac OS X",
  $browser: "Chrome",
  $browser_version: 104,
  $current_url: "https://yourwebsite.com/pages/target-page.html?param=value",
  $title: "Your page title",
  $host: "yourwebsite.com",
  $initial_referrer: "http://google.com?q=query",
  $initial_referring_domain: "google.com",
  $pathname: "/pages/target-page.html",
  $referrer: "http://google.com?q=query",
  $referring_domain: "google.com",
  $screen_height: 1080, // screen height in pixels
  $screen_width: 1920, // screen width in pixels
 
  initial_utm_medium: "email",
  initial_utm_campaign: "ad",

  utm_source: "newsletter",
  utm_medium: "email",
  utm_campaign: "insta-ad1",
  utm_content: "toplink",
  utm_term: "jorndan-sneakers",
 
  $pageview_id: "182a239735d1fb-08f5527f006d0b-1b525635-4da900-182a239735e1cc5",
  $session_id: "182a231fdd3597-0341e9ffa768f-1b525635-4da900-182a231fdd41b94",

  mp_lib: "web",
  $lib_version: "1.3.0",
  $insert_id: "iitj42ivuwfozhls",

  $event_type: "click",
  $elements: [ // hierarchy of the element clicked
    { // element that was clicked
      attr__class: "registration-btn-cls",  // class name of element
      tag_name: "button", // tag name of element
      attr__id: "reg-button", // id of element
      nth_child: 2, // element was 2nd child of the parent
      nth_of_type: 1 // element is the 1st button in parent
    },
    { // element's parent
      attr__class: "registration-div",
      tag_name: "div",
      attr__id: "reg-div",
      nth_child: 6,
      nth_of_type: 2
    },
    { // parent of parent
      attr__class: "",
      tag_name: "body",
      attr__id: "",
      nth_child: 2,
      nth_of_type: 1
    }
  ],
  $el_text: "Register with us",
  $el_nested_text: "Register with us",
  $event_name: "$web_event",
}

Code injected by On Track is most often used to build custom javascript integrations by passing identity information from Freshpaint to a javascript SDK.

On Track can also be used to compute new properties using javascript and send them with the event.

The following example shows how On Track in tag manager can be used to compute new event properties using custom javascript code.

Write transformation code in On Track

Computed property is available in the event

Security

If you want to opt out of this feature, and disable Freshpaint admins from using it, you can set the option tag_manager to false in your Freshpaint init() call.

freshpaint.init("YOUR-ENV-ID", {
    ...options...
    "tag_manager": false,
});