# Tag Manager

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](https://app.freshpaint.io/settings/projects), 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.](https://documentation.freshpaint.io/readme/guides/quickstart/installing-the-freshpaint-sdk-with-a-content-security-policy-csp)&#x20;

![](https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MA7aDqsXMFbUsWVqonF%2F-MQIImoE6yK7YQxYBpXi%2F-MQIJncXpUfScTAqek20%2Fezgif-5-3c8d86790d6b.gif?alt=media\&token=6fc0c342-3e39-49a6-be1b-ed501f0f1849)

### 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](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#identify) or [event properties](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#addeventproperties) with dynamic properties that are only available after page load.

{% hint style="warning" %}
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.
{% endhint %}

### 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](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#addpageviewproperties) within single page apps.

### On Identify

Code injected here will be triggered each time [`freshpaint.identify()`](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#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()`.

{% hint style="warning" %}
The values of the `userID` and `userProps` variables can be null if no userID or no user properties are passed into `freshpaint.identify()`.
{% endhint %}

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()`](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#identify) 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.

<details>

<summary>Sample value of <code>builtinProperties</code> for an autotrack event</summary>

```javascript
{
  time: 1660750813.235,
  $device_id: "182a231fdd1c09-0b27ca77a82ebd-1b525635-4da900-182a231fdd2da7",
  $user_id: "support@freshpaint.io",
  $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",
}


```

</details>

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.

<div><figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2FzeaT2ljQxBXrGRI41g1k%2FScreenshot%202022-09-15%20at%206.30.10%20PM.png?alt=media&#x26;token=61dd97b6-e31c-4bf5-a49b-c66e5ab0e5a4" alt=""><figcaption><p>Write transformation code in On Track</p></figcaption></figure> <figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2FjSxBcCm7Ou883NBOfgPu%2FScreenshot%202022-09-15%20at%206.34.40%20PM.png?alt=media&#x26;token=7bbe6c0c-c0c7-47b8-bcdb-b169e833f802" alt=""><figcaption><p>Computed property is available in the event</p></figcaption></figure></div>

## 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,
});
```
