# Quick Start Guide

### Install Freshpaint template into GTM Container

* In GTM, navigate to "Templates", then "Search Gallery", and search for the Freshpaint template.&#x20;

<div align="left"><figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2Fe4W5lps87L0MemhX2z7m%2FScreenshot%202024-11-05%20at%202.15.41%E2%80%AFPM.png?alt=media&#x26;token=d80b47d0-d7a0-47d9-9e2f-d849ff0fc6a7" alt=""><figcaption></figcaption></figure></div>

* Add the template to your workspace

<div align="left"><figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2FYayNrGYd8vA0zV69RQDB%2FScreenshot%202024-11-05%20at%202.19.23%E2%80%AFPM.png?alt=media&#x26;token=7680cbb3-aa0d-40eb-bafc-0d67565972b6" alt="" width="290"><figcaption></figcaption></figure></div>

### Ensure GTM installation

* If it is not already added, ensure that the GTM code is installed by clicking on your GTM Container ID and following the installation instructions. <br>

  <div align="left"><figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2F3Iznkh2pves6HVEsMwTx%2FScreenshot%202024-11-05%20at%202.27.24%E2%80%AFPM.png?alt=media&#x26;token=8fccf9c8-13b0-4b04-b550-19f60144ca60" alt="" width="375"><figcaption></figcaption></figure></div>

### Configure Freshpaint Tags in GTM

#### Initial Freshpaint Snippet

* Add the Freshpaint script as a tag in GTM. In your GTM tag setup, select **Custom HTML** tag type, then copy the snippet for the "Web" configuration on the dashboard [sources](https://app.freshpaint.io/sources) page.&#x20;

<figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2F3Y8kBQ8VXfJW3ZifdWYO%2FScreenshot%202024-11-04%20at%203.42.14%E2%80%AFPM.png?alt=media&#x26;token=3c26eb9f-824c-4804-b684-4d97351d86a2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
It's important to set this trigger to fire on "**Initialization**" - this ensures that the Freshpaint tag is loaded before any other events occur.  Any **addEventProperties** tag types also need to be set up on **Initialization.**
{% endhint %}

#### Additional Events Example

* All other events can be triggered by their relevant event type (Page View, Click, etc...)&#x20;
* Test out a simple button click event by adding a new tag, selecting the Freshpaint Tag Configuration, and choosing the desired event type or creating a new one.&#x20;

  <figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2FdrzjfdL6h2KuhFbudU0C%2FScreenshot%202024-11-05%20at%202.36.41%E2%80%AFPM.png?alt=media&#x26;token=d74583ac-1839-4d0d-a9ca-719e87cb7791" alt=""><figcaption></figcaption></figure>

### Preview and Publish Changes

* Test out your configuration by selecting the "Preview" button and typing in a URL where the GTM is installed.&#x20;
* The web page will open in a preview container, and when the event is successfully sent, it will show up in the GTM window.&#x20;

  <figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2FKuoiirIegZup50a9p9mH%2FScreenshot%202024-11-05%20at%202.43.35%E2%80%AFPM.png?alt=media&#x26;token=479e537a-c3bb-4202-a3c5-63cf235ad768" alt=""><figcaption></figcaption></figure>
