> ## Documentation Index
> Fetch the complete documentation index at: https://docs.firmhouse.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add analytics and tracking scripts

> Add Google Analytics, Google Tag Manager, pixels, and other tracking scripts to the Customer Portal, Self Service Center, and Firmhouse Checkout.

Tracking scripts help you measure visits, checkout progress, purchases, campaign performance, and customer portal usage. In Firmhouse, where you add them depends on which customer-facing area you want to track.

You can add Google Analytics, Google Tag Manager, Google pixels, advertising pixels, support widgets, or other trusted third-party scripts to customer-facing Firmhouse pages.

Most merchants use a tag manager, such as Google Tag Manager, so tracking tags can be managed in one place without updating the Firmhouse project settings every time a marketing or analytics tag changes.

## Where you can add tracking scripts

Firmhouse supports tracking scripts in different customer-facing areas:

* **Customer Portal**: Add scripts directly in your Customer Portal page templates.
* **Self Service Center (legacy)**: Add scripts through the legacy Self Service Center custom code fields.
* **Firmhouse Checkout**: Add scripts to checkout pages, payment pages, payment status pages, and order confirmation pages.

Add the script to every area where you need tracking. For example, a checkout conversion pixel or Google Analytics checkout event belongs on Firmhouse Checkout, while a support widget for existing customers may belong in the Customer Portal or the legacy Self Service Center.

## Before you start

Only add scripts that you trust and actively maintain. Custom code can affect page loading, customer privacy, and checkout conversion.

**Please note:** Header and Body custom code fields are only available for Firmhouse projects that have a custom domain configured. This applies to the legacy Self Service Center and Firmhouse Checkout custom code setup. Customer Portal tracking is template-based instead.

## Customer Portal templates and custom code fields

Customer Portal and the legacy Self Service Center do not use the same setup:

* **Customer Portal** uses page templates.
* **Self Service Center (legacy)** and **Firmhouse Checkout** use **Header** and **Body** custom code fields.

## Add scripts to the Customer Portal

Use these steps when your project uses the new Customer Portal and you want tracking code to run on Customer Portal pages.

If you do not see **Customer Portal** in the sidebar yet, first enable **Customer Portal v2** in **New Features**. Then use the **Overview** page in the new Customer Portal settings to test with **Preview mode** or enable the new portal for all customers. See [Customer Portal quickstart](/customer-portal-v2/quickstart).

### Steps

1. In your Firmhouse project, open **Customer Portal > Templates**.
2. Open the page template where the script should run, such as `dashboard.liquid` or another relevant template.
3. Add the tracking snippet directly in the template using `<script>` tags where needed.
4. Click **Save** to create a new template version.
5. Use **Preview latest package** to test the change.
6. Publish the template version when you are ready to make it live for customers.

For more about editing and publishing templates, see [Building templates](/customer-portal-v2/components/overview).

## Add scripts to the Self Service Center (legacy)

Use these steps for legacy Self Service Center analytics, support widgets, or behavior tracking.

Use the **Header** field for code that must load inside the page `<head>`, such as tag manager snippets, site verification tags, CSS, consent managers, and scripts that need to initialize early.

Use the **Body** field for code that must load inside the page `<body>`, such as fallback snippets, noscript snippets, event snippets, widgets, and tracking code that should run after the page starts rendering.

Follow the instructions from your tracking tool. If the tool provides two snippets, add each snippet to the matching field.

### Steps

1. In your Firmhouse project, go to **Settings > Self Service Center**.
2. Scroll to the **Custom code** section.
3. Paste code that must load in `<head>` into the **Self Service Center Header** field.
4. Paste code that must load in `<body>` into the **Self Service Center Body** field.
5. Click **Update project**.
6. Open the Self Service Center and confirm that the script loads.

<img src="https://mintcdn.com/firmhousebv/i0tAuZcoMZU4WKIb/images/analytics-tracking-self-service-center-header-body-fields.png?fit=max&auto=format&n=i0tAuZcoMZU4WKIb&q=85&s=0b948912ffe2bbedae6c0603592e96a6" alt="Self Service Center custom code fields" width="2190" height="1232" data-path="images/analytics-tracking-self-service-center-header-body-fields.png" />

## Add scripts to Firmhouse Checkout

Use these steps for checkout analytics, Google Tag Manager, Google Analytics, Google pixels, and purchase tracking pixels.

### Steps

1. In your Firmhouse project, go to **Firmhouse Checkout > Preferences**.
2. Scroll to the **Custom code** section.
3. Paste code that must load in `<head>` into the **Header** field.
4. Paste code that must load in `<body>` into the **Body** field.
5. Click **Update project**.
6. Open a checkout page on your custom domain and confirm that the script loads.

<img src="https://mintcdn.com/firmhousebv/i0tAuZcoMZU4WKIb/images/analytics-tracking-checkout-preferences-header-body-fields.png?fit=max&auto=format&n=i0tAuZcoMZU4WKIb&q=85&s=e20f2314264ff267e37473437f917d8c" alt="Checkout preferences with header and body fields" width="2186" height="1230" data-path="images/analytics-tracking-checkout-preferences-header-body-fields.png" />

When you copy code from a tracking tool, replace example values with your real account, container, measurement, or pixel ID. For example, replace `GTM-XXXX` with your actual Google Tag Manager container ID or replace a sample Google Analytics measurement ID with your own ID.

## Update or remove existing tracking pixels

Update a tracking pixel when your tracking tool gives you a new snippet, account ID, container ID, or event setup. Remove scripts that are no longer used, duplicated, or causing issues.

### Steps

1. Go to the settings page where the pixel is installed:
   * **Customer Portal > Templates** for Customer Portal scripts
   * **Settings > Self Service Center** for legacy Self Service Center scripts
   * **Firmhouse Checkout > Preferences** for checkout scripts
2. Find the existing script in the relevant template or **Header** or **Body** field.
3. To update the pixel, replace the old snippet, ID, or event code with the new version.
4. To remove the pixel, delete the snippet from the template or field.
5. Save or update the change.
6. Open the affected page and confirm that the pixel was updated or removed.

## Best practices

* Use a tag manager when possible, so most tracking changes can be managed outside Firmhouse.
* Keep scripts short and only load tools you actively use.
* Avoid duplicate pixels. Loading the same pixel twice can create duplicate events and incorrect reporting.
* Test scripts on a real Customer Portal, Self Service Center, or checkout page after every change.
* Respect consent and privacy requirements for the countries where you operate.
* Do not paste scripts from unknown sources.
* Keep a record of which tools are installed and where they are installed.
* Review custom code after changing domains, checkout settings, or tracking tool configuration.

Most tools that provide a JavaScript, HTML, or tag manager snippet can be added this way, including Google Tag Manager, Google Analytics, Google Ads conversion tracking, Google pixels, Meta Pixel, TikTok Pixel, Microsoft Advertising Universal Event Tracking, and consent management tools.

Some tools require extra event configuration to measure purchases or other conversions. For checkout conversion events, see [Conversion tracking on Firmhouse Checkout](/configure/firmhouse-checkout/conversion-tracking).

## Troubleshooting

### The script does not load on checkout

Confirm that your checkout runs on a custom domain. Custom code on Firmhouse Checkout only works on a custom domain unless a Firmhouse team member has enabled an exception for your project.

### The script loads in one area but not another

Customer Portal templates, legacy Self Service Center custom code, and Firmhouse Checkout custom code are separate. Add the script to each area where it should run.

### Events are duplicated

Check whether the same pixel is installed directly in Firmhouse and through a tag manager. Keep only one installation path for each pixel or event.

### Purchase conversions are missing

Make sure the conversion script runs on the checkout confirmation or payment status page. If you use a tag manager, configure the purchase event to fire only when the checkout is paid. See [Conversion tracking on Firmhouse Checkout](/configure/firmhouse-checkout/conversion-tracking).

### The page looks broken after adding a script

Remove the most recently added script and test the page again. Scripts that change global styles, load slowly, or modify the page structure can affect page behavior.

### A tag manager preview mode cannot connect

Open the page on the same domain where the script is installed. Then confirm that browser privacy settings, consent settings, or ad blockers are not blocking the preview connection.
