New format
How to add JavaScript to a website: CMS and site builders
Counters, chats, pixels, and widgets almost always arrive as a JavaScript snippet. Your job is to place the code where it loads on the right pages, avoid duplicates, and make sure cached HTML still includes the script.
Below: what the snippet looks like, where to put it in WordPress and builders, how to edit a template without a panel, and what to verify after insertion. Yandex Metrica installation is covered separately; this article covers the general principle.
What code people usually add
Most often it's a fragment from a service account: analytics, ad pixel, chat, A/B test, booking widget. It looks like `<script>…</script>` or an external file include.
Don't confuse it with a content HTML block or CSS. JS runs logic in the browser; a bug can break a button or form on the page.
Take code only from:
- the official service account
- platform documentation
- a brief from your developer or agency
General principle: where the script should live
The code needs to land in the HTML of all or selected templates: home, categories, products, thank-you pages. Ideally in one place: theme header or footer, a "scripts in head" field, or a tag-manager container.
After insertion, check page source and Network: did the script load? Any duplicate? Is CSP blocking it?
Check:
- Ctrl+U / View Source — is the fragment there
- incognito without a blocker
- CMS/CDN cache flush
- mobile and desktop
WordPress (self-hosted)
Typical paths: a header/footer scripts plugin, theme settings ("code in head"), a child theme editing `header.php`/`footer.php`, or a tag manager. Don't edit the parent theme without a child — updates wipe changes.
The post visual editor isn't for JS. On WordPress.com, custom JS may be unavailable on lower plans — check current platform limits.
Order of operations:
- backup
- paste code in one official place
- flush cache
- check 3–4 page types
- don't duplicate the same code in GTM and the theme at once
Site without a handy admin: editing the template
If you only have FTP or a file manager, find the shared header/footer template (often `header.php`, `index.html`, or an engine layout). Insert the fragment per the service docs, keep UTF-8, and don't break neighboring tags.
A typo in `header` can take the whole site down. Keep a file copy before editing and check the homepage right after upload.
Mini safety checklist:
- download file → edit locally → upload
- don't delete closing tags
- don't expose `.php.bak` backups in the webroot
Builders: Wix, Squarespace, Shopify and similar
Builders have their own fields: "Custom code," "Header scripts," theme settings, checkout scripts. Menu names change — search for "code," "scripts," "pixel," or "head."
Plan limits are real: on free plans, custom JS is often locked. Shopify: theme code / additional scripts — carefully, and with a theme backup. Don't treat 2018 screenshots as gospel.
General builder flow:
- find the custom code field in site or theme settings
- paste the fragment from the service account
- publish
- check on the live page (not only preview)
Typical mistakes after insertion
Two identical counters, code only on the homepage, cache serving HTML without the script, a minifier breaking JS, Content-Security-Policy cutting the service domain, pasting HTML instructions together with email boilerplate.
If "it worked yesterday," check the theme deploy, cache plugin, and builder update. Metrica diagnostics are in a separate article.
Acceptance checklist:
- one code instance
- needed URLs covered
- no console errors from your fragment
- event or visit visible in the service account
FAQ
Should the script go in the head or before </body>?
Follow the vendor's recommendation. Analytics often goes as early as possible in the head; heavy widgets sometimes load lower. Don't guess against the service docs.
Can I paste JS into page text through the visual editor?
Bad idea: the editor may strip tags. Use a scripts field, a plugin, a tag manager, or a template edit.
What is a tag manager?
A container (for example GTM) where marketing tags live without constant theme edits. Handy when you have many counters and a clear publish owner.
Why does nothing work after I add the script?
Cache, code missing on some templates, a typo, a blocker, CSP, a script only on a draft theme, or a double install.
Is it safe to copy any snippet from the internet?
No. Take code only from the service account (analytics, ads, chat). Random "speed boosters" and "SEO scripts" are malware risks.
Do I need FTP access?
To edit header.php or the theme — often yes, or via the host file manager. On builders — only their panel.
Are WordPress.com and WordPress.org the same?
No. On .com, custom JS limits depend on the plan. On self-hosted .org you're freer via theme and plugins.
I added a script — will that boost SEO?
Adding JS alone doesn’t move search visibility. A counter is for analytics; growth comes from content, technical work, and demand — often a 2–6 month horizon for page-one progress after prep.
Pixel pasted in the visual editor — and the theme cache still serves old HTML?
We’ll place one trusted snippet in the template or GTM — and verify source + Network.
Discuss the task
