Cookield

Integrações

Guias passo a passo para integrar a Cookield nas principais plataformas e frameworks. Todas as integrações usam o mesmo script — a diferença está apenas em onde adicioná-lo.

WordPress

Existem duas formas de instalar a Cookield no WordPress:

Opção 1: Plugin (recomendado)

Instale o plugin oficial Cookield diretamente do painel do WordPress:

  1. Acesse Plugins → Adicionar novo
  2. Pesquise por "Cookield"
  3. Instale e ative o plugin
  4. Em Configurações → Cookield, cole seu Banner ID

Opção 2: Manual (header.php)

Adicione o script diretamente no arquivo header.php do seu tema:

<!-- wp-content/themes/seu-tema/header.php -->
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  
  <!-- Cookield — adicionar ANTES de wp_head() -->
  <script src="https://api.cookield.io/banner/YOUR_BANNER_ID.js" async></script>
  
  <?php wp_head(); ?>
</head>

Google Tag Manager

Integre a Cookield via GTM usando uma tag de HTML personalizado:

  1. No GTM, crie uma nova Tag → Custom HTML
  2. Cole o código abaixo
  3. Em Triggering, selecione All Pages
  4. Defina prioridade alta (ex: 9999) para garantir execução antes de outras tags
  5. Publique o container
<!-- GTM Custom HTML Tag -->
<script src="https://api.cookield.io/banner/YOUR_BANNER_ID.js" async></script>

💡 Dica: Configure a tag com prioridade máxima para garantir que o banner seja carregado antes de qualquer tag de analytics ou marketing. A Cookield integrará automaticamente com o Consent Mode v2 do GTM.

Shopify

Adicione o script no arquivo theme.liquid da sua loja:

  1. No admin da Shopify, vá para Online Store → Themes → Edit code
  2. Abra o arquivo theme.liquid
  3. Adicione o script antes da tag </head>
<!-- theme.liquid -->
<head>
  <!-- ... outras tags ... -->

  <!-- Cookield — adicionar antes de </head> -->
  <script src="https://api.cookield.io/banner/YOUR_BANNER_ID.js" async></script>
</head>

Next.js / React

Use o componente Script do Next.js no layout raiz:

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="pt-BR">
      <head>
        <Script
          src="https://api.cookield.io/banner/YOUR_BANNER_ID.js"
          strategy="beforeInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

A estratégia beforeInteractive garante que o script seja carregado antes de qualquer outro JavaScript da página.

Angular

Adicione o script no index.html do seu projeto Angular:

<!-- src/index.html -->
<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <title>Minha App Angular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Cookield — adicionar antes de outros scripts -->
  <script src="https://api.cookield.io/banner/YOUR_BANNER_ID.js" async></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Vue.js

Adicione o script no public/index.html (Vue CLI) ou index.html (Vite):

<!-- public/index.html (Vue CLI) ou index.html (Vite) -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minha App Vue</title>

  <!-- Cookield -->
  <script src="https://api.cookield.io/banner/YOUR_BANNER_ID.js" async></script>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

PHP / Laravel

No Laravel, adicione o script no layout Blade principal:

{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>@yield('title') - {{ config('app.name') }}</title>

  <!-- Cookield — adicionar antes de outros scripts -->
  <script src="https://api.cookield.io/banner/YOUR_BANNER_ID.js" async></script>

  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
  @yield('content')
</body>
</html>

Para PHP puro, adicione o mesmo <script> no <head> do seu template principal.

Custom HTML

Para qualquer site estático ou framework não listado acima, basta adicionar o script no <head> de todas as páginas:

<script src="https://api.cookield.io/banner/YOUR_BANNER_ID.js" async></script>

É isso. Uma única linha de código. Nenhuma configuração adicional necessária.

Dicas gerais

  • ✓Sempre adicione o script antes de outros scripts de terceiros.
  • ✓O atributo async garante que o script não bloqueie a renderização da página.
  • ✓Não é necessário adicionar nenhuma configuração JavaScript — tudo é gerenciado pelo servidor.
  • ✓O script funciona em HTTP e HTTPS, mas recomendamos sempre HTTPS.
  • ✓Para SPAs (Single Page Applications), o script se adapta automaticamente à navegação client-side.