Skip to content

Feat: Added Google Tag Manager to CheerpJ docs. - #436

Open
Liamoscarmccaffrey wants to merge 1 commit into
mainfrom
cheerpj/added-docs-gtm
Open

Feat: Added Google Tag Manager to CheerpJ docs.#436
Liamoscarmccaffrey wants to merge 1 commit into
mainfrom
cheerpj/added-docs-gtm

Conversation

@Liamoscarmccaffrey

@Liamoscarmccaffrey Liamoscarmccaffrey commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

This pull requests adds the Google Tag Manager tag to the CheerpJ Docs site, so that it will correctly feed analytics data into the CheerpJ GA4 property.

I've included Claude's comment below so you've got sight of its summary:

Google Tag Manager (container GTM-WXJ325GT) is now installed on the CheerpJ docs site, and I verified it in a real build.

One note on placement: [src/content/docs]only holds markdown content — there's no or there. Those come from the shared theme package that all Leaning Tech sites use, which already had a GTM setup for browserpod. So I generalized that existing pattern rather than hardcoding a second copy:

  • New [gtm.ts] a small per-product map of GTM container IDs: browserpod keeps its existing GTM-M4T2J9TS, and cheerpj3 (which is what every page of cheerpj.com resolves to, including all of /docs) gets your new GTM-WXJ325GT. Other sites (labs, cheerp.io, cheerpx.io) load no GT
  • **[BaseHead.astro:84-85]**The GTM script now uses the mapped container ID, and I moved it up so it renders immediately after , i.e. as high in as possible per Google's instructions (it was previously near the bottom of the head).
  • [Shell.astro:154-167] — added the iframe fallback immediately after the opening tag. This part was missing entirely from the earlier browserpod install, so browserpod gains it too.
    Verification: I built the cheerpj site — all 80 real pages contain the script as the first element in and the noscript right after ; the 128 files without it are all http-equiv="refresh" redirect stubs, which is expected. I also rebuilt the browserpod site to confirm the shared-theme change didn't disturb it: its 47 pages still carry GTM-M4T2J9TS and none picked up the CheerpJ container.

One thing to double-check on your side: the tag fires on all of cheerpj.com, not just /docs — that's how the site is built (the whole domain is one Astro site with base /docs/, plus the theme's shared pages). If you wanted it strictly limited to certain paths, that's better handled with a trigger condition inside the GTM container itself.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying labs-browserpod-previews with  Cloudflare Pages  Cloudflare Pages

Latest commit: 85b1b6f
Status: ✅  Deploy successful!
Preview URL: https://3824ca1f.labs-browserpod-previews.pages.dev
Branch Preview URL: https://cheerpj-added-docs-gtm.labs-browserpod-previews.pages.dev

View logs

@Liamoscarmccaffrey

Copy link
Copy Markdown
Contributor Author

Passes Linter and Prettier.

@Liamoscarmccaffrey

Copy link
Copy Markdown
Contributor Author

@GabrielaReyna just a note about <pnpm-workspace.yaml>, it's added the following:

allowBuilds:
  esbuild: set this to true or false
  sharp: set this to true or false

This may have just been to ensure it passes local build. But let me know if it needs to be removed and I'll take it out.

@Liamoscarmccaffrey
Liamoscarmccaffrey marked this pull request as ready for review July 16, 2026 12:55

@codingfrog27 codingfrog27 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Liam! Overall looks good, nice to have the clunky hardcoded product check removed :)

Testing done

  • checked pages and confirmed they had the container tag
  • checked that browserpod pages kept its own tag

Requested changes

  • Like you already mentioned in your comment I think we should indeed get rid of the lines in the yaml file. They could break the build in the future.

  • Also since basehead should always be a subcomponent of shell, we can actually just pass the value from shell into basehead, and we don't have to define it twice. Not a big issue but thought this way would be more streamlined, and less prone to bugs (since before you get the id out of potentially different urls), I've requested changes for this.

Extra checks

  • I assume we have the container itself live and published from the webUI right? if you're not getting data yet that's the first thing I'd double check
  • I noticed we don't have anything for consent management, think it's the same for browserpod and depending on what you want the gtm for it's also not needed, just thought i'd flag it.
  • Be aware that this only adds tracking to the CJ docs and not the CJ site itself

Comment thread pnpm-workspace.yaml
Comment on lines +5 to +8
allowBuilds:
esbuild: set this to true or false
sharp: set this to true or false

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
allowBuilds:
esbuild: set this to true or false
sharp: set this to true or false

Like you mentioned this should be removed. I think local build should pass without it as well and it'll cause the build to fail if we ever update to pnpm 11.

import { SITE_TITLE } from "../consts";
import companyFavicon from "../assets/branding/company/tower.svg";
import { productFromUrl } from "../lib/products";
import { gtmContainerId } from "../lib/gtm";

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import { gtmContainerId } from "../lib/gtm";

only needs to be imorted in shell.astro with new setup

title: string;
description: string;
image?: string | undefined;
}

@codingfrog27 codingfrog27 Jul 27, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
gtmId?: string | undefined;
}

add id as optional prop that can be passed from parent (which in our case will always be passed by shell)

const {
title,
description,
image = product?.ogImage ?? "/social/common@2x.png",

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
image = product?.ogImage ?? "/social/common@2x.png",
gtmId,

add it to props object


const localised = getLocalisedPaths(Astro.url.pathname, Astro.currentLocale);

const gtmId = gtmContainerId(product);

@codingfrog27 codingfrog27 Jul 27, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const gtmId = gtmContainerId(product);

can be removed now since we inherit it from shell

<BaseHead
title={title || SITE_TITLE}
description={description || SITE_DESCRIPTION}
{image}

@codingfrog27 codingfrog27 Jul 27, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{image}
{gtmId}

we're passing the id to basehead here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants