# Code Snippets ### How to open Code Snippets 1. Open your workspace canvas 2. Click the **project name dropdown** at the top 3. Select **Code Snippets** 4. The right side panel opens \[📸 IMAGE: Code snippets side panel screenshot] *** ### GTM Install Code Use this when installing GTM in your project for the first time. #### Next.js ```tsx import { GoogleTagManager } from '@next/third-parties/google' export default function RootLayout({ children }) { return ( {children} ) } ``` #### HTML ```html ``` *** ### Event Code An event code snippet is auto-generated for each GA4 Event tag in your workspace. #### TypeScript ```typescript window.dataLayer?.push({ event: 'create_project', project_id: '', // Project unique ID source_page: '', // Page where event occurred location: '', // Location }); ``` #### JavaScript ```javascript window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: 'create_project', project_id: '', source_page: '', location: '', }); ``` *** ### Correct Usage ```typescript // ✅ Correct const handleCreateProject = async () => { const project = await createProject(data) window.dataLayer?.push({ event: 'create_project', // Must match CE trigger name exactly project_id: project.id, // Pass actual value source_page: 'dashboard', // Pass actual value }) } // ❌ Wrong window.dataLayer?.push({ event: 'GA4 - create_project', // This is the tag name, not event name project_id: '{{dlv - project_id}}', // GTM syntax cannot be used in code }) ``` *** ### Important Notes > ⚠️ The **event** value must exactly match the CE trigger name in GTM — including capitalization. > ⚠️ GTM variable syntax ({{ }}) cannot be used in your actual code. Always pass real values directly. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://taviqo.gitbook.io/taviqo-docs/features/code-snippets.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.