analytics/resources/views/websites/snippet.blade.php

<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Tracking Snippet') }}: {{ $website->name }}
            </h2>
            <a href="{{ route('dashboard.show', $website) }}" class="text-sm text-gray-600 hover:text-gray-900">
                &larr; {{ __('Back to dashboard') }}
            </a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">{{ __('Install the tracking code') }}</h3>
                    <p class="text-sm text-gray-600 mb-2">
                        {{ __('Copy and paste the following code snippet into the') }}
                        <code class="text-sm bg-gray-100 px-1.5 py-0.5 rounded">&lt;head&gt;</code>
                        {{ __('section of every page on') }}
                        <strong>{{ $website->domain }}</strong>.
                    </p>
                    <p class="text-sm text-green-700 bg-green-50 border border-green-200 rounded px-3 py-2 mb-6">
                        <strong>{{ __('Ad-blocker resistant:') }}</strong>
                        {{ __('This snippet uses paths that bypass most ad blockers.') }}
                    </p>

                    <div class="relative" x-data="{ copied: false }">
                        <pre class="bg-gray-900 text-gray-100 rounded-lg p-4 text-sm overflow-x-auto"><code id="snippet-code">{{ $website->embedSnippet() }}</code></pre>

                        <button
                            @click="
                                navigator.clipboard.writeText(document.getElementById('snippet-code').textContent);
                                copied = true;
                                setTimeout(() => copied = false, 2000);
                            "
                            class="absolute top-3 right-3 inline-flex items-center gap-1 rounded-md bg-gray-700 px-2.5 py-1.5 text-xs font-medium text-gray-200 hover:bg-gray-600 transition"
                        >
                            <span x-show="!copied">{{ __('Copy') }}</span>
                            <span x-show="copied" x-cloak>{{ __('Copied!') }}</span>
                        </button>
                    </div>
                </div>
            </div>

            <div class="mt-6 bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">{{ __('Track custom events') }}</h3>
                    <p class="text-sm text-gray-600 mb-4">
                        {{ __('After the tracking script is loaded, you can send custom events from anywhere in your JavaScript:') }}
                    </p>

                    <pre class="bg-gray-900 text-gray-100 rounded-lg p-4 text-sm overflow-x-auto"><code>// Basic event
ta('event', 'signup');

// Event with details
ta('event', 'purchase', {
    category: 'ecommerce',
    action: 'checkout',
    label: 'premium_plan',
    value: 29.99,
    properties: {
        plan: 'premium',
        period: 'monthly'
    }
});</code></pre>
                </div>
            </div>

            <div class="mt-6 bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">{{ __('Details') }}</h3>

                    <dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">{{ __('Tracking ID') }}</dt>
                            <dd class="mt-1 text-sm text-gray-900 font-mono">{{ $website->tracking_id }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">{{ __('Domain') }}</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ $website->domain }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">{{ __('Script URL') }}</dt>
                            <dd class="mt-1 text-sm text-gray-900 font-mono break-all">{{ route('tracking.script.alt', $website->tracking_id) }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">{{ __('Collection Endpoint') }}</dt>
                            <dd class="mt-1 text-sm text-gray-900 font-mono break-all">{{ route('collect.store.alt') }}</dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>