Analytics

How to add a tracking pixel (Meta, TikTok, LinkedIn)

How to add a tracking pixel (Meta, TikTok, LinkedIn)

A tracking pixel is a small piece of code from an ad platform that tells it who visited your site, so you can measure and target ads. To add one to your TeleportHQ site, copy the pixel code from the platform, click the Project settings cog at the bottom of the left sidebar, open Custom code and paste the code under Head. The code saves itself; publish to put it on your live site. The same steps work for tools like Hotjar or Microsoft Clarity.

Before you start

  • You need a role that can change the project's settings.
  • Get your pixel code from the ad platform. Look for an option to install the code manually, for example:
    • Meta Pixel: in Meta Events Manager, choose your pixel and install the code manually.
    • TikTok Pixel: in TikTok Events Manager, set up a web pixel with manual installation.
    • LinkedIn Insight Tag: in LinkedIn Campaign Manager, open the Insight Tag and choose to install it yourself.
  • Ad platforms change their screens often, so these names may differ.
  • For Google Analytics or Google Tag Manager, use the dedicated fields instead. See How to add Google Analytics or Google Tag Manager.

Steps

  1. In the editor, click the Project settings cog at the bottom of the left sidebar. The Project settings panel opens.
  2. Under Data & code, click Custom code ("Code added to the head and body of every page."). The Custom code settings open next to the panel.
The Data & code group of the TeleportHQ Project settings panel, with Custom code highlighted
  1. Click Head.
  2. Click inside the code box and paste the full pixel code, including the <script> and </script> tags and any <noscript> part.
The TeleportHQ Custom code settings with the Head tab selected above the code box
  1. Wait a moment. The code saves itself as you type: there's no Save button.
  2. Close Custom code with the close button at its top right (tooltip Close).
  3. Publish your site. See How to publish your site.

Check that it worked

Open your published site. Then check the ad platform's own tool: for example, the Meta Pixel Helper browser extension or the pixel's test events page. It shows your visit within a few minutes. The pixel doesn't run inside the TeleportHQ editor, only on your published site.

Troubleshooting

The pixel isn't detected Check that you published after pasting the code. Then test on your live site, not the editor. Turn off your ad blocker while testing.

My site looks broken after adding code The pasted code has an error. TeleportHQ warns: "WARNING: Invalid code added here might break your website." Delete the code from the Head box, publish again, and copy the code again from the platform.

Good to know

  • Pixels run on every page of your published site.
  • Head or Body? Ad platforms ask for their code in the head, so use Head. If a platform tells you to put a part of its code in the body, paste that part under Body. Scripts under Body run once the page has loaded in the visitor's browser; a <noscript> part works in either box.
  • Pixels usually set cookies and load as soon as a page opens, whether or not visitors accepted your cookie banner. TeleportHQ doesn't hold them back. If your visitors must agree first, use a consent tool that controls these scripts. See How to add a cookie consent banner and Does TeleportHQ analytics use cookies?.
  • Purchase and sign-up events. A basic pixel only records page views. To send purchases or sign-ups to Meta or TikTok, set that up in the platform, or through Google Tag Manager, which receives your TeleportHQ store's events automatically.
  • Code for one spot on one page, like a booking widget, goes in a Code Embed element instead. See How to add your own HTML or JavaScript with Code Embed.
Share

Related Articles

How to add code to every page (head and body)

In the TeleportHQ editor, click the Project settings cog at the bottom of the left sidebar, open Data & code → Custom code, choose Head or Body and paste your script, style, meta or link tags; the code saves itself and runs on every page of your published site, but not on the editor canvas.

How to add Google Analytics or Google Tag Manager

To add Google Analytics 4 to a TeleportHQ site, open the project's Project Settings page from its card on the dashboard, click Custom Code, paste your measurement ID (starting with G-) into Analytics or your container ID (starting with GTM-) into Tag Manager, click Save Changes and publish.

Does TeleportHQ analytics use cookies?

No. TeleportHQ's built-in visitor analytics never sets cookies and, apart from recent order numbers on store sites, stores nothing in visitors' browsers unless they accept your cookie banner; it records anonymous page views and clicks, doesn't keep IP addresses with visit records, and deletes detailed visit records after 90 days.

How to add a cookie consent banner

In TeleportHQ, click Cookie Consent in Elements → Primitives → Interactive to add a banner with Accept and Decline buttons and a link to your terms page; Google Analytics and Google Tag Manager wait for Accept, the banner works on websites and web apps alike, and for cookie categories you paste a consent tool's code into Project settings → Custom code.

How to see who visits your site (Analytics)

In TeleportHQ, click Growth in the left sidebar, then Analytics, to see your published site's visitors, page views, traffic sources, countries, devices, most-viewed pages, clicks and returning visitors, for the last 24 hours, the last 7, 30 or 90 days or a custom range.

How to add your own HTML or JavaScript with Code Embed

In TeleportHQ, you add your own HTML, CSS or JavaScript to one spot on a page by dragging or clicking the Code Embed element in Elements → Primitives → Media, pasting the code into the Code Embed (HTML+CSS+JS) window and clicking Save.