Tag Manager

Google Tag Manager containers on the site's pages.

kitloom/tag-manager · admins: kitloom/tag-manager-filament, kitloom/tag-manager-nova

Video lessons

Recorded in the Filament admin; the Nova admin works the same way.

Tag Manager Settings

Google Tag Manager on the site's pages: the container, its <noscript> frame, and a data layer that tells the container what kind of page it is on. It does what GTM4WP (or Site Kit's Tag Manager) did on the WordPress site, under the same variable names, so a container built for the WordPress site keeps working. The admin page is the Tag Manager section (kitloom/tag-manager-filament or kitloom/tag-manager-nova).

Setting it up

Open Tag Manager → Settings and enter the container ID: GTM-XXXXXXX, shown at the top of Tag Manager. Several containers go in one field, separated by commas. An empty field means Tag Manager is off.

The module puts three things on every page of the theme:

Where	What
@siteHead	The data layer with the page's variables, then the container's loader
@siteBodyOpen, right after <body>	The <noscript> frame, for visitors without JavaScript

The data layer

Before the container loads, the page tells it what it is about, with the names GTM4WP uses:

Variable	Value
pagePostType	The post type (post, page, book). On special pages: frontpage, bloghome, search-results, 404-error
pagePostType2	The kind of page and the type: single-post, category-post, tag-post, tax-post, author-post, day-post, month-post, year-post, archive-book
pageCategory	The post's category slugs; on a category page, that category
pageAttributes	The post's tag slugs; on a tag page, that tag
pagePostAuthor	The author's display name

Nothing about the visitor goes in: the page is the same for everyone and is cached. Page variables off leaves only an empty data layer.

In an Inertia theme, the next page opens without a reload, and the variables stay those of the first page. Use Tag Manager's History Change trigger for page views there.

Shop sales

With the shop module, the data layer also gets the shop's e-commerce events, in the shape Google's GA4 e-commerce guide uses: view_item, add_to_cart, begin_checkout and purchase. Each one is pushed after an {ecommerce: null} that clears the previous one.

A GA4 Event tag can send them:

• trigger: a Custom Event matching view_item|add_to_cart|begin_checkout|purchase;
• event name: ;
• Send e-commerce data on.

Each order is pushed once per browser. A failed or cancelled order is not pushed.

Consent

With the Cookie Consent module installed:

• Google Consent Mode off — the container waits until the visitor agrees to statistics, or to marketing if the settings say so (choose marketing when the container holds ad tags). The <noscript> frame is left out: without JavaScript there is nobody to ask.
• Google Consent Mode on (Cookie Consent → Settings) — the container loads at once with every signal denied. Google's tags inside it keep to the visitor's answer. Tags of other vendors need a trigger:
  • on every consent answer, the data layer gets the event kitloom_consent_update, with kitloomConsent = {functional, preferences, statistics, marketing};
  • fire such tags on that custom event, with a condition on kitloomConsent.marketing (a Data Layer Variable).

Without a consent module, the container loads at once.

Signed-in users

Load for signed-in users is on by default, as in GTM4WP. Turned off, the container is left out of the pages of anyone signed in. This is safe with the page cache, which keeps pages for guests only.

Advanced

• Domain — the host of a server-side container that serves gtm.js and ns.html.
• Environment — gtm_auth and gtm_preview from Tag Manager → Admin → Environments, to run a staging environment of the container.
• Data layer variable — another name than dataLayer, for a container set up that way. Google Consent Mode always speaks to dataLayer, so keep the default when you use it.

Coming from WordPress

If the WordPress site had GTM4WP or Site Kit with Tag Manager, the settings page shows an Import button. The console command does the same:

php artisan tag-manager:import
php artisan tag-manager:import --from=gtm4wp

Plugin	What is taken
GTM4WP	The containers (2.x rows or the 1.x settings), the domain, the environment, the data layer name. Whether page variables were on. Whether signed-in users were excluded.
Site Kit by Google	The container, if Site Kit placed the snippet

The plugins' options are not touched. Not carried over:

• GTM4WP's custom loader path;
• its other data layer variables: post ID, dates, visitor data, WooCommerce;
• its per-role exclusions. Only "signed-in or not" is kept.

For developers

• Settings: tag_manager_*, declared by TagManagerOptions and written through SettingWriter.
• How the container reaches the page:
  • TagManagerScripts is the PageScriptsProvider.
  • The loader goes through kitloom/site's ScriptConsent::gate() as a Google tag.
  • The data layer does not: it sets nothing.
  • PageVariables::of($page) builds the variables from the page's Content part.
• CSP: a nonce set with Vite::useCspNonce() goes on the scripts.
• Config: php artisan vendor:publish --tag=kitloom-tag-manager-config publishes the admin sections switch.
• Tests, from the application that installs the package: php vendor/bin/phpunit --testsuite TagManager.