Guia de instalação: WordPress, Next.js, Tilda e outros

Início rápido

Adicione o script de monitorização do EuroMetrics ao seu site em menos de um minuto. Cole o seguinte excerto antes da tag de fecho </head> em todas as páginas que pretende monitorizar:

<script defer src="https://app.eurometrics.eu/script.js"
        data-website-id="YOUR_WEBSITE_ID"></script>

Substitua YOUR_WEBSITE_ID pelo ID do site que encontra no seu painel do EuroMetrics, em Definições → Sites → Código de monitorização.

O script tem apenas 1.5 KB: carrega de forma assíncrona com defer e não tem qualquer impacto no desempenho da página. Não são definidos cookies e não é necessário banner de consentimento.

WordPress

O EuroMetrics disponibiliza um plugin oficial para WordPress, a forma mais simples de o configurar. Também pode fazer a integração manualmente se preferir ter controlo total.

Opção 1: plugin oficial (recomendado)

1. Transfira a versão mais recente a partir do GitHub (eurometrics-1.0.0.zip).
2. Na administração do WordPress, aceda a Plugins → Adicionar novo → Carregar plugin. Selecione o ficheiro ZIP transferido e clique em Instalar agora e depois em Ativar.
3. Aceda a Definições → EuroMetrics, cole o seu ID do site e guarde. Já está: a monitorização fica ativa.

Configuração

1. Aceda a Definições → EuroMetrics.
2. O campo URL do EuroMetrics vem preenchido com https://app.eurometrics.eu. Só o altere se utilizar uma instância White Label.
3. Introduza o seu ID do site (encontra-o no painel do EuroMetrics em Definições → Sites → Código de monitorização), no formato UUID.
4. Se quiser, ative Excluir administradores para que as suas próprias visitas não sejam contabilizadas quando tem sessão iniciada como administrador.
5. Clique em Guardar alterações. O indicador de estado fica verde quando a monitorização está ativa.

Referência das definições do plugin

Opção 2: instalação manual

Se preferir não usar o plugin, adicione o código de monitorização manualmente através do ficheiro functions.php do seu tema:

function add_eurometrics_tracking() {
    $website_id = 'YOUR_WEBSITE_ID';
    $host = 'https://app.eurometrics.eu';
    echo '<script defer src="' . esc_url($host . '/script.js') . '" data-website-id="' . esc_attr($website_id) . '"></script>';
}
add_action('wp_head', 'add_eurometrics_tracking');

Em alternativa, use um plugin como o Insert Headers and Footers para colar a tag do script na secção <head> sem editar ficheiros do tema.

Opção 3: plugin de excertos de código

Se utiliza um plugin de gestão de código como o WPCode, o Code Snippets ou semelhante:

1. Abra as definições do plugin ou o gestor de excertos.
2. Adicione um novo excerto à secção Site-Wide Header.
3. Cole o script de monitorização e substitua YOUR_WEBSITE_ID pelo seu ID do site real.
4. Guarde e ative o excerto.

Verificar a instalação

• Confirme a inserção do script: abra o seu site numa janela anónima, clique com o botão direito → Ver código-fonte da página e procure eurometrics.
• Confirme os pedidos de rede: abra as Ferramentas de programador (F12) → separador Rede, recarregue a página e filtre por script.js.
• Confirme no painel: inicie sessão no EuroMetrics e abra o seu site. A visualização de página deve aparecer em segundos.

Resolução de problemas

Avançado: WordPress Multisite

O plugin do EuroMetrics funciona em instalações WordPress Multisite. Ative o plugin na rede e, em cada subsite, aceda a Definições → EuroMetrics e introduza o ID do site correspondente.

Avançado: compatibilidade com cache

O script de monitorização é compatível com todos os principais plugins de cache para WordPress: WP Super Cache, W3 Total Cache, LiteSpeed Cache (sem configuração especial), WP Rocket (confirme que o script não está na lista “Delay JavaScript Execution”) e Cloudflare (exclua script.js do Rocket Loader).

Avançado: WooCommerce

O EuroMetrics funciona com o WooCommerce sem configuração adicional. As visualizações das páginas de produto, de categoria, do carrinho, do checkout e da confirmação de encomenda são registadas automaticamente.

Next.js

Use o componente nativo next/script para um carregamento otimizado. Adicione-o ao layout raiz para que seja carregado em todas as páginas:

// app/layout.tsx
import Script from "next/script"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.eurometrics.eu/script.js"
          data-website-id="YOUR_WEBSITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

A estratégia afterInteractive garante que o script carrega depois de a página ficar interativa, tal como defer em HTML simples.

Usa o Pages Router? Se utiliza o Pages Router em vez do App Router, adicione o componente Script ao _app.tsx em vez do layout.tsx.

Tilda

O Tilda permite adicionar HTML personalizado ao <head> do seu site:

1. Abra o seu projeto no Tilda e aceda a Site Settings.
2. Clique no separador More e procure HTML code for <head> section.
3. Cole o script de monitorização.
4. Clique em Save e depois em Publish. Os dados começam a aparecer no seu painel dentro de poucos minutos.

Recomendações gerais

Content Security Policy (CSP)

Se o seu site utiliza uma Content Security Policy, adicione as seguintes diretivas:

Content-Security-Policy:
  script-src 'self' https://app.eurometrics.eu;
  connect-src 'self' https://app.eurometrics.eu;

Aplicações de página única

O EuroMetrics deteta automaticamente a navegação do lado do cliente em SPAs criadas com React, Vue, Svelte e outras frameworks. O script escuta as alterações de pushState e replaceState, por isso não é necessária configuração adicional.

Monitorização de eventos personalizados

Além das visualizações de página, pode registar eventos personalizados como cliques em botões, envios de formulários ou compras:

// Track a custom event
umami.track("signup_click", {
  plan: "pro",
  source: "pricing_page",
})

Os eventos aparecem no seu painel em Eventos e podem ser usados para criar funis e objetivos de conversão.

Precisa de ajuda? Escreva-nos para support@eurometrics.eu.