The React components in resources/js/react/ mirror the Livewire pair. They fetch from the package's HTTP routes, which means they work in any React app served by the Laravel host — Inertia, standalone SPA, or piecemeal islands.
Publishing
If you'd rather copy the sources into your app tree:
php artisan vendor:publish --tag=google-tag-manager-js
The React components land at resources/js/vendor/google-tag-manager/react/. Or point your bundler at vendor/artisanpack-ui/google-tag-manager/resources/js/react/ directly.
GtmSnippet
Client-side snippet installer. See Snippet Installer.
ContainerOverview
import { ContainerOverview } from '@/js/vendor/google-tag-manager/react'
<ContainerOverview
accountId="123456"
containerId="654321"
workspaceId="1"
/>
Props:
| Prop | Type | Required | Purpose |
|---|---|---|---|
accountId |
string | Yes | GTM account ID. |
containerId |
string | Yes | GTM container ID. |
workspaceId |
string | null | No | Specific workspace. When null, the fetcher uses the default workspace. |
baseUrl |
string | No | Base URL for the package's routes. Defaults to the URL emitted by @gtmRoutes (see below). |
fetchImpl |
fetch-like | No | Custom fetch implementation. Testing hook. |
TagList
import { TagList } from '@/js/vendor/google-tag-manager/react'
<TagList accountId="123456" containerId="654321" workspaceId="1" />
Props mirror ContainerOverview — workspaceId is required here, not optional.
Route discovery
The React and Vue components need to know the URLs of the package's HTTP routes. If your host app moves the route group under a custom prefix, the client needs the new URLs.
Emit the resolved URLs to the client with the @gtmRoutes Blade directive:
{{-- Somewhere before your bundle loads --}}
@gtmRoutes
This publishes window.__apGtmRoutes with the container overview and tag list URLs. The React and Vue components read it automatically. Explicitly overriding baseUrl on the component prop still wins.
Error surfaces
The components use the GtmContainerOverviewError / GtmTagListError classes to surface typed errors (code field), so you can distinguish between:
base-not-installed(501)not-connected(409)unauthenticated(401)invalid-request(422)- Anything else (network, upstream API error) — the underlying
messageis human-readable
Customize the error UI by wrapping the components or by publishing the sources and editing directly.