Google Tag Manager - v1.0.0

Admin-side components that surface Tag Manager data in your app. Two surfaces ship in each of three flavors — Blade/Livewire, React, and Vue — so you can pick whichever fits your stack. All three share one backend: the routes and API client are identical, so backend behavior does not fork by flavor.

• Container overview — name, public ID, workspace, tag/trigger/variable counts, latest published version.
• Tag list — every tag in a workspace with name, type, firing triggers, and status. Client-side sort and pagination.

Both require the base artisanpack-ui/google package to be configured and the current user to be connected. Without those, the components render a "connect Google" call-to-action instead of blowing up.

See also: Livewire, React, Vue.

Quick reference

Livewire

<livewire:google-tag-manager::container-overview
    account-id="123456"
    container-id="654321"
    workspace-id="1" />

<livewire:google-tag-manager::tag-list
    account-id="123456"
    container-id="654321"
    workspace-id="1" />

workspace-id is optional on the container overview (the fetcher will pick the default workspace when omitted). It is required on the tag list.

React

import { ContainerOverview, TagList } from '@/js/vendor/google-tag-manager/react'

<ContainerOverview accountId="123456" containerId="654321" workspaceId="1" />
<TagList accountId="123456" containerId="654321" workspaceId="1" />

Vue

<ContainerOverview account-id="123456" container-id="654321" workspace-id="1" />
<TagList account-id="123456" container-id="654321" workspace-id="1" />

How they get their data

Livewire components call the fetchers directly server-side. React and Vue components fetch from the routes:

• GET /google-tag-manager/container-overview?account_id=...&container_id=...&workspace_id=...
• GET /google-tag-manager/tags?account_id=...&container_id=...&workspace_id=...

Both routes go through [ 'web', 'auth' ] middleware by default and require a connected Google account. See Configuration to change the middleware, and HTTP Routes for the response schema.

Response caching

Successful responses are cached at the client layer for google-tag-manager.api.cache_ttl seconds (default 300). If a user changes a tag in the GTM UI, the change will not appear until the cache expires or you clear it:

app( 'cache.store' )->flush();

Set cache_ttl to 0 in config to disable caching entirely. See Testing for how the tests avoid the cache.

Missing-base and connection-missing states

• If the base package is not installed at all, the Livewire component sets baseInstalled = false and the shipped Blade view renders a install artisanpack-ui/google call-to-action instead of the surface. The routes return 501 Not Implemented.
• If the base is installed but the current user has no GoogleConnection (or its status is not connected), the routes return 409 Conflict with an error payload. The React and Vue components render a "connect your Google account" state.

Related

• CMS Framework Widgets — the same Livewire components exposed as CMS admin dashboard widgets
• API Reference — the classes and endpoints powering these components
• Testing — how to write tests against the components