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
- In the editor, click the Project settings cog at the bottom of the left sidebar. The Project settings panel opens.
- 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.
- Click Head.
- Click inside the code box and paste the full pixel code, including the
<script>and</script>tags and any<noscript>part.
- Wait a moment. The code saves itself as you type: there's no Save button.
- Close Custom code with the close button at its top right (tooltip Close).
- 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.