Scripts such as analytics, a tracking pixel or a chat widget go into Custom code in Project settings. They ship inside the theme and run on every page of your Ghost site. They never run on the Fantasma canvas, so the preview stays the same.
Add a script
Open your project in Fantasma.
In the narrow column of icons at the left edge of the editor, click the sliders icon, Project settings.
Click Custom code.
Click Add script. A menu opens with Empty script and ready scripts for Google Analytics, Plausible, Fathom, Umami and Meta Pixel.
Select the script you want. Its settings open in the same window, with the code filled in for a ready script.
In Where, select where the script goes on each page.
In Runs, select when it runs.
In Code, paste your service's code, or replace the sample ID in the ready code with your own, which your service shows in its settings. For Google Analytics, that is your measurement ID, such as G-7K2M9QX4LB. Until you replace it, a line under the code says which value to change.
Changes save with the project as you make them. A new script is turned on, and it reaches your site the next time you publish the theme, as Publish your theme to Ghost shows. Scripts with the same Where run in the order of the list.
Where
What it means
Head
Inside the page's head, after Ghost's own tags. Most analytics services ask for this place.
Body start
Right after the page's body opens. Some tag managers ask for this place. Ghost's Code injection has no place for it.
Body end
At the end of the page. Use it for chat widgets and scripts that do not need to load first.
Runs
What it means
Always
On every page load. The default for an empty script.
After analytics consent
Only after the visitor allows analytics cookies in your cookie banner. The ready analytics scripts start with it.
After marketing consent
Only after the visitor allows marketing cookies. Meta Pixel starts with it.
Make a script wait for consent
A script set to wait runs only on a site with a cookie banner. Without one, the script page says "This project has no cookie banner, so this script will never run." Click Add a banner in that note to add a cookie banner to the Default layout, or add one yourself as Add a cookie banner shows.
Exported as, under the code, shows the script as the theme holds it until the visitor agrees. A visitor who declines or ignores the banner never runs it, and the banner remembers the choice. Only <script> tags can wait. An <img>, <iframe> or <noscript> tag in the code loads at once, and a line under the code asks you to remove it.
Turn off, change or delete a script
On Custom code, each script has a switch. Turn it off to leave the script out of the theme without deleting it; publish again for the change to reach your site. Click a script's name to open its page, change it, and click the arrow next to its name to go back. Delete script is at the end of its page.
Limits and errors
A project holds up to 50 scripts, each up to 10,000 characters. A script with an error, such as a <script> tag that is not closed, shows "Has errors" in red in the list, and the theme ships without it until you fix it. The error itself is in red under the code. My custom code doesn't run covers the other reasons a script does not run.
Scripts in Ghost Admin under Settings > Code injection still work beside these. They run on every theme you use, and never wait for the cookie banner. If your analytics code is already there, remove it from Code injection when you add it here, or each visit counts twice.
The canvas never runs your scripts. To test one, publish the theme, open your site in a private browser window, and check your service's live view.
Scripts such as analytics, a tracking pixel or a chat widget go into Custom code in Project settings. They ship inside the theme and run on every page of your Ghost site. They never run on the Fantasma canvas, so the preview stays the same.
Add a script
G-7K2M9QX4LB. Until you replace it, a line under the code says which value to change.Changes save with the project as you make them. A new script is turned on, and it reaches your site the next time you publish the theme, as Publish your theme to Ghost shows. Scripts with the same Where run in the order of the list.
Make a script wait for consent
A script set to wait runs only on a site with a cookie banner. Without one, the script page says "This project has no cookie banner, so this script will never run." Click Add a banner in that note to add a cookie banner to the Default layout, or add one yourself as Add a cookie banner shows.
Exported as, under the code, shows the script as the theme holds it until the visitor agrees. A visitor who declines or ignores the banner never runs it, and the banner remembers the choice. Only
<script>tags can wait. An<img>,<iframe>or<noscript>tag in the code loads at once, and a line under the code asks you to remove it.Turn off, change or delete a script
On Custom code, each script has a switch. Turn it off to leave the script out of the theme without deleting it; publish again for the change to reach your site. Click a script's name to open its page, change it, and click the arrow next to its name to go back. Delete script is at the end of its page.
Limits and errors
A project holds up to 50 scripts, each up to 10,000 characters. A script with an error, such as a
<script>tag that is not closed, shows "Has errors" in red in the list, and the theme ships without it until you fix it. The error itself is in red under the code. My custom code doesn't run covers the other reasons a script does not run.Scripts in Ghost Admin under Settings > Code injection still work beside these. They run on every theme you use, and never wait for the cookie banner. If your analytics code is already there, remove it from Code injection when you add it here, or each visit counts twice.
The canvas never runs your scripts. To test one, publish the theme, open your site in a private browser window, and check your service's live view.