Google Tag Manager - v1.0.0

Getting Started

Welcome to ArtisanPack UI Google Tag Manager. This guide walks through the shortest path from composer require to a working GTM container snippet on your pages, and then to authenticated access to the Tag Manager API for admin dashboards.

Requirements

PHP 8.2+
Laravel 10.x, 11.x, 12.x, or 13.x
A Google Tag Manager container ID (looks like GTM-XXXXXXX) — required for the client-side snippet
The base artisanpack-ui/google package configured with an OAuth 2.0 client — required for the server-side API and Livewire/React/Vue admin components

Optional peer packages:

Package	What it enables
`livewire/livewire` `^3.6`	The `<livewire:google-tag-manager::container-overview />` and `<livewire:google-tag-manager::tag-list />` admin components.
`artisanpack-ui/cms-framework`	The CMS Framework Widgets — surfaces both components as CMS admin dashboard widgets.

Neither is required; the package boots and works without them. Layouts using only @gtmSnippet need neither.

1. Install

composer require artisanpack-ui/google-tag-manager

The service provider and GoogleTagManager facade are auto-discovered. The base artisanpack-ui/google package is pulled in automatically.

2. Configure your container ID

Add your GTM container ID to .env:

GTM_CONTAINER_ID=GTM-XXXXXXX

That's the minimum to enable the client-side snippet. Skip publishing the config file until you need to change routes, cache, or scopes — the defaults are safe.

3. Drop the snippet into your layout

<!DOCTYPE html>
<html>
<head>
    @gtmSnippetHead
    {{-- ... --}}
</head>
<body>
    @gtmSnippetBody
    {{-- ... --}}
</body>
</html>

Or emit both blocks together (less optimal but still works):

@gtmSnippet

The directive renders nothing when the container ID is missing or the snippet is disabled, so it's safe to include unconditionally. See Snippet Installer for the details.

4. (Optional) Set up the API surface

If you want the admin dashboard components — container overview, tag list, and the React/Vue equivalents — you also need OAuth. Follow the artisanpack-ui/google getting-started guide to publish migrations and register your Google OAuth client.

Once a user is connected via the base package, this package's routes, Livewire components, and API client will work.

5. Render a component

For a Livewire-first app, drop the Livewire component:

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

For a React or Vue app, mount the equivalent client component:

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

<ContainerOverview accountId="123456" containerId="654321" />

See Components for the full component reference.

Next steps

Installation — the full install walkthrough, including publishable assets and route customization.
Snippet Installer — the snippet's Blade directives, React/Vue components, and configuration.
Components — Livewire, React, and Vue admin components in depth.
CMS Framework Widgets — surface the admin components in the CMS admin dashboard.
API Reference — the classes and facades the package ships.