Google Tag Manager - v1.0.0

React

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 message is human-readable

Customize the error UI by wrapping the components or by publishing the sources and editing directly.