Skip to main content
Install the FirstTouch tracking pixel on your website so FirstTouch can detect website visitor signals for your team. The pixel setup guide lives in FirstTouch at https://app.firsttouch.ai/signals. Open the relevant website visitor signal and use the right-side drawer to copy your team’s tracking script.
Add the script once, in the <head> of every page you want to track.

​
Install The Tracking Pixel

1

Open Signals

In FirstTouch, go to https://app.firsttouch.ai/signals.
2

Open the pixel setup drawer

Select the website visitor signal, then open the right-side setup drawer.
3

Copy the tracking script

In the drawer, click Copy in the Copy the tracking script section.
4

Add the script to your website header

Paste the script into the global <head> or header code area for your website platform.
5

Publish your website changes

Publish the change so the script is live on your public website. Saving a draft is not enough.
6

Verify in FirstTouch

Return to the setup drawer and click Check now to verify that FirstTouch can detect the pixel.

​
What The Script Looks Like

Copy the exact script from your FirstTouch workspace. It includes your team’s unique identifier.
Do not copy the placeholder example above. Use the script copied from the FirstTouch setup drawer so the tracking ID is correct for your team.

​
Platform Setup Notes

Use the guide that matches where your website is managed. The exact menu labels can change by platform, but the goal is always the same: install the FirstTouch script once in a global header or site-wide custom code area, publish the change, then verify it in FirstTouch.

​
Manual HTML Or Code-Based Website

Use this option if you or your developer can edit the website files directly.
  1. Open the shared layout, global HTML template, or header file for your site. Common files include header.php, index.html, index.php, or a framework layout file.
  2. Find the closing </head> tag.
  3. Paste the FirstTouch script immediately before </head>.
  4. Save the file and deploy the change to production.
  5. Open your live website and verify the pixel in FirstTouch.
Do not paste the script inside another <script> tag, and do not install it more than once on the same page.

​
Webflow

  1. Open Site Settings > Custom Code.
  2. Paste the FirstTouch script into Head Code.
  3. Click Save.
  4. Click Publish and publish to the live domain.
Webflow requires a paid site plan to add custom code.

​
Google Tag Manager

  1. Open Tags > New > Custom HTML.
  2. Paste the FirstTouch script.
  3. Set the trigger to All Pages - Page View.
  4. Click Save.
  5. Click Submit > Publish.
The tag is not live until the container is published. If your site uses a cookie consent tool, configure the FirstTouch tag to fire only after the required consent is granted.

​
WordPress

The safest WordPress option is usually a header injection plugin because it keeps the script separate from theme files.
  1. Install a header code plugin such as WPCode or Head, Footer and Post Injections.
  2. Open the plugin’s header or site-wide code settings.
  3. Paste the FirstTouch script into the Header, Head, or Scripts in header box.
  4. Make sure the code is enabled for every page.
  5. Click Save Changes.
  6. Clear any WordPress, hosting, or CDN cache.
If your WordPress site uses Elementor, Divi, or another builder, you can add the script in the builder’s custom code area instead. Make sure it loads in the page head on all pages.

​
WordPress Theme File Editor

Only use this option if you are comfortable editing theme files.
  1. In WordPress, open Appearance > Theme File Editor.
  2. Select header.php from the theme files.
  3. Paste the FirstTouch script immediately before the closing </head> tag.
  4. Click Update File.
  5. Clear caches and check the live site.
Theme updates can overwrite direct theme file edits. Prefer a header code plugin when possible.

​
WordPress With Elementor

  1. Open the Elementor header template or site-wide custom code area.
  2. Add an HTML widget or custom code entry in the header.
  3. Paste the complete FirstTouch script, including the opening and closing <script> tags.
  4. Save or publish the template.
  5. Clear caches and verify the live site in FirstTouch.

​
Wix

  1. Open your Wix site dashboard.
  2. Go to Settings > Custom Code.
  3. Click Add Custom Code.
  4. Paste the FirstTouch script into the code box.
  5. Name it FirstTouch Tracking Script.
  6. Set Add Code to Pages to All pages.
  7. Set it to load on each new page.
  8. Set Place Code in to Head.
  9. Click Apply and publish the site.

​
HubSpot CMS

  1. In HubSpot, click the settings icon.
  2. Go to Content > Pages.
  3. Use Choose a domain to edit its settings and select the relevant domain, or choose the default settings for all domains.
  4. In Site Header HTML, click Override default settings if needed.
  5. Paste the FirstTouch script into the header HTML field.
  6. Click Save.

​
Squarespace

  1. Log in to Squarespace and open the site.
  2. Go to Website > Pages.
  3. Open Custom Code or Code Injection.
  4. Paste the FirstTouch script into the Header field.
  5. Click Save.
  6. Visit the live site and verify the pixel in FirstTouch.

​
Framer

  1. Open your Framer project.
  2. Open Settings.
  3. Go to the General tab.
  4. Find Custom Code.
  5. Paste the FirstTouch script into the field for code in the <head> tag.
  6. Save the settings.
  7. Publish the site.
Some Framer sites behave like single-page apps. After publishing, navigate between pages and confirm FirstTouch can still detect visits beyond the first page load.

​
Shopify

  1. In Shopify admin, go to Online Store > Themes.
  2. Open the actions menu for the active theme and select Edit code.
  3. Open the main layout file, commonly theme.liquid.
  4. Paste the FirstTouch script immediately before the closing </head> tag.
  5. Click Save.
  6. Preview the store, then verify the pixel on the live storefront.

​
Tilda

  1. Open the page editor.
  2. Open the blocks library.
  3. Add the T123 Embed HTML code block.
  4. Paste the FirstTouch script into the block.
  5. Save and publish the page.
If Tilda does not apply the block globally, repeat the setup on every page you want FirstTouch to track.

​
Next.js

For Next.js, install the script in the root layout so it loads for the whole app.
  1. Copy the FirstTouch script from the setup drawer.
  2. Add it to the root layout using Next.js script handling, or add the external script URL with your team’s tracking ID.
  3. If your app uses client-side routing, confirm that FirstTouch records navigation after route changes, not only the first page load.
  4. Deploy the app and verify the live domain in FirstTouch.
If you are unsure whether your app uses the App Router or Pages Router, ask your developer to place the FirstTouch script in the shared root layout or app shell that runs on every page.

​
React

For a React single-page app, install FirstTouch in the top-level app shell.
  1. Copy the FirstTouch script from the setup drawer.
  2. Add it to your root HTML file, such as public/index.html, immediately before </head>.
  3. If your app does not use a static HTML template, load the script from the top-level component when the app starts.
  4. Navigate between routes and confirm FirstTouch detects visits after client-side route changes.
  5. Deploy the app and verify in FirstTouch.

​
TypeScript

For TypeScript projects, the preferred approach is still to paste the exact FirstTouch script into the global HTML head or framework layout.
  1. Copy the exact script from FirstTouch.
  2. Add it to the global HTML template, root layout, or a dedicated script loader.
  3. If you convert the script into TypeScript, keep the tracking ID and script source exactly the same as the copied FirstTouch snippet.
  4. Compile and deploy the project.
  5. Verify the live site in FirstTouch.

​
Angular

For Angular apps, load FirstTouch from the app shell so it is available across routes.
  1. Copy the FirstTouch script from the setup drawer.
  2. Add it to src/index.html before </head>, or create an Angular service that loads the script once when the root component starts.
  3. If you use a service, call it from AppComponent so it runs for the whole application.
  4. Navigate between Angular routes and confirm FirstTouch continues detecting visits.
  5. Build, deploy, and verify the live site in FirstTouch.

​
Installation Checks

  • Confirm the script appears once on the live page.
  • Confirm the published page source includes first-touch-web-visitors.js.
  • Clear website, plugin, CDN, and browser caches after installing.
  • If you use a cookie consent platform, make sure it allows the FirstTouch script to run after the required consent is granted.
  • If your site has a Content Security Policy, allow scripts from https://app.firsttouch.ai.
  • Re-check the pixel after major CMS, theme, tag manager, or deployment changes.

​
Ask An AI Or Developer To Install It

If someone else manages your website, send them the script from the FirstTouch drawer with this prompt:

​
Troubleshooting

  • If verification fails, confirm the published page source includes first-touch-web-visitors.js.
  • If you installed through Google Tag Manager, confirm the container version was published.
  • If you installed through Webflow, confirm you published the site after saving custom code.
  • If your site has a strict Content Security Policy, allow scripts from https://app.firsttouch.ai.
  • If the script only exists on one landing page, FirstTouch can only detect visits to pages where the script loads.