gtm-template-spec

name	gtm-template-spec
description	Cria especificação completa (PRP) para desenvolvimento de templates GTM. Use quando precisar planejar um novo template de tag ou variável, definir requisitos, ou documentar antes de implementar.
context	fork
agent	Plan
allowed-tools	Read, Write, Grep, Glob

GTM Template Specification Generator

Você vai criar uma especificação completa (PRP - Product Requirements Prompt) para um template do Google Tag Manager.

Contexto do Projeto

Este repositório contém templates GTM para plataformas brasileiras de e-commerce e marketing. Consulte a documentação em .claude/docs/ para entender:

• Estrutura de templates (visao-geral.md)
• APIs disponíveis (api-reference.md)
• Permissões (permissoes-de-modelo-personalizado.md)
• Guia de estilo (guia-de-estilo-do-modelo.md)

Sua Tarefa

Crie um arquivo de especificação em .claude/prps/gtm-templates/[nome-do-template].md com a seguinte estrutura:

1. Business Context

# [Nome do Template] - GTM Template Specification

## Business Context

**Problema que resolve:**
[Descreva o problema ou necessidade de negócio]

**Plataforma/Integração:**
[Nome da plataforma: RD Station, Hotmart, VTEX, Panda Video, etc.]

**Tipo de Template:**
- [ ] Tag Template
- [ ] Variable Template

**Público-alvo:**
[Quem vai usar: analistas de marketing, devs, agências]

**Benefícios:**
- [Benefício 1]
- [Benefício 2]
- [Benefício 3]

2. Technical Specifications

## Technical Specifications

### Template Info

**Nome de exibição:**
`[Nome funcional] da [Nome da Empresa]`

**Descrição curta (1-2 frases):**
[Descrição que aparecerá na interface do GTM]

**Categorias:**
- [ ] Analytics
- [ ] Advertising
- [ ] Conversions
- [ ] Marketing
- [ ] Other: [especificar]

**Ícone:**
[URL ou descrição do ícone - PNG/JPEG/GIF, 48x48 a 96x96px]

### Fields Configuration

Lista todos os campos que o usuário vai configurar:

| Nome do Parâmetro | Tipo de Campo | Label | Help Text | Obrigatório | Valor Padrão |
|-------------------|---------------|-------|-----------|-------------|--------------|
| `trackingId` | Text Input | ID de Tracking | Ex: UA-XXXXX-Y ou G-XXXXXXX | Sim | - |
| `eventName` | Dropdown | Tipo de Evento | Selecione o tipo de evento a enviar | Sim | pageview |
| `enableDebug` | Checkbox | Habilitar Debug | Ativa logs no console para debugging | Não | false |

### Code Logic

**Fluxo principal:**
1. [Passo 1]
2. [Passo 2]
3. [Passo 3]

**APIs necessárias (via require):**
- `sendPixel` - Enviar pixel de tracking
- `encodeUriComponent` - Codificar parâmetros
- `logToConsole` - Logging condicional
- [outras APIs necessárias]

**Lógica de validação:**
- Validar que trackingId não está vazio
- Verificar formato do email (se aplicável)
- [outras validações]

**Tratamento de erros:**
- Callback data.gtmOnFailure() em caso de erro
- Log de erro se debug habilitado
- [outros tratamentos]

### Permissions Required

Liste todas as permissões necessárias:

- [ ] `send_pixel` - URL pattern: `https://analytics.example.com/*`
- [ ] `get_url` - Componentes: query
- [ ] `logging` - Apenas em modo debug
- [ ] `read_data_layer` - Chaves: `ecommerce.*`
- [outras permissões]

### External Dependencies

**Scripts a injetar:**
- URL: `https://example.com/script.js`
- Cache token: [URL ou identificador único]
- Quando: [condição para carregar]

**APIs externas:**
- Endpoint: `https://api.example.com/track`
- Método: POST/GET
- Autenticação: [se aplicável]

3. Implementation Details

## Implementation Details

### Pseudocódigo

\`\`\`javascript
// 1. Importar APIs
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// 2. Validar dados
if (!data.trackingId) {
  return data.gtmOnFailure();
}

// 3. Construir URL
const baseUrl = 'https://analytics.example.com/collect';
const params = '?id=' + encodeUriComponent(data.trackingId);

// 4. Enviar pixel
sendPixel(baseUrl + params, data.gtmOnSuccess, data.gtmOnFailure);
\`\`\`

### Casos de Uso

**Caso 1: E-commerce Purchase Tracking**
- Evento: Compra finalizada
- Dados: valor, produto, transaction ID
- Comportamento esperado: Enviar conversão para plataforma

**Caso 2: Lead Generation**
- Evento: Formulário enviado
- Dados: email, nome, telefone
- Comportamento esperado: Registrar lead na plataforma

### Edge Cases

- **Campo vazio:** Se campo obrigatório vazio, chamar gtmOnFailure
- **URL inválida:** Validar formato antes de enviar
- **Timeout:** Configurar timeout apropriado
- [outros edge cases]

### Testing Checklist

- [ ] Testar com dados válidos
- [ ] Testar com dados inválidos
- [ ] Verificar logs em modo debug
- [ ] Confirmar pixel enviado corretamente
- [ ] Validar permissões configuradas
- [ ] Testar em Preview Mode do GTM

4. Documentation

## Documentation

### README.md do Template

Estrutura do README que deve acompanhar o template:

\`\`\`markdown
# [Nome do Template]

Template para [descrição]

## Instalação

1. No GTM, vá em Templates → Novo
2. Clique em "Importar" e selecione \`template.tpl\`
3. Salve o template

## Configuração

### Campos obrigatórios

- **[Campo 1]**: [descrição]
- **[Campo 2]**: [descrição]

### Campos opcionais

- **[Campo 3]**: [descrição]

## Uso

1. Crie uma nova tag usando este template
2. Configure os campos necessários
3. Configure um trigger apropriado
4. Teste em Preview Mode
5. Publique

## Debugging

Habilite a opção "Debug Mode" para ver logs no console.

## Exemplos

### Exemplo 1: [Nome]
[Configuração exemplo]

### Exemplo 2: [Nome]
[Configuração exemplo]

## Referências

- [Link para documentação da plataforma]
- [Link para guia de uso]
\`\`\`

### Comentários no Código

Principais seções que devem ter comentários:
- Importação de APIs
- Validação de dados
- Construção de payload
- Envio de dados
- Tratamento de erros

5. Acceptance Criteria

## Acceptance Criteria

### Funcional
- [ ] Template aparece na lista de templates do GTM
- [ ] Todos os campos configurados aparecem na interface
- [ ] Validação de campos funciona corretamente
- [ ] Dados são enviados corretamente para plataforma
- [ ] Callbacks gtmOnSuccess/gtmOnFailure funcionam
- [ ] Logs de debug funcionam quando habilitados

### Não-funcional
- [ ] Código segue guia de estilo do repositório
- [ ] Permissões são mínimas necessárias
- [ ] README.md completo e em português
- [ ] Exemplos de uso documentados
- [ ] Código comentado em pontos-chave
- [ ] Performance: executa em < 100ms

### Segurança
- [ ] Não expõe dados sensíveis em logs
- [ ] Valida entrada de usuário
- [ ] Usa HTTPS para todas as chamadas externas
- [ ] Permissões específicas (não wildcards amplos)

### Compatibilidade
- [ ] Funciona em Web Container
- [ ] Funciona em Server Container (se aplicável)
- [ ] Compatível com Consent Mode (se aplicável)

Próximos Passos

Após criar a especificação:

1. Review: Peça review da especificação antes de implementar
2. Implementação: Use a especificação como guia para criar o template
3. Testes: Siga o testing checklist
4. Documentação: Crie o README.md baseado na seção Documentation
5. PR: Submeta para revisão

Template de Saída

Crie o arquivo em: .claude/prps/gtm-templates/[nome-do-template].md

Use o template acima e preencha TODAS as seções com informações específicas baseadas no que o usuário solicitou.

---

Fontes de Referência:

• Product Requirements Prompts para Agentic Engineering
• Context Engineering para PRPs
• Documentação GTM Templates em .claude/docs/