Saltar al contenido principal

Integrar Plausible en tu Sitio

Guia para instalar el script de Plausible en diferentes plataformas.

Script basico​

El script de tracking es muy sencillo:

<script defer data-domain="tusitio.com" src="https://tuapp.deployalo.com/js/script.js"></script>

Reemplaza:

  • tusitio.com con tu dominio
  • tuapp.deployalo.com con la URL de tu Plausible

WordPress​

Opcion 1: Plugin (recomendado)​

  1. Instala el plugin "Insert Headers and Footers"
  2. Ve a Settings > Insert Headers and Footers
  3. Pega el script en "Scripts in Header"
  4. Guarda

Opcion 2: Editar tema​

  1. Ve a Appearance > Theme Editor
  2. Abre header.php
  3. Pega el script antes de </head>

Ghost​

  1. Ve a Settings > Code Injection
  2. Pega el script en "Site Header"
  3. Click "Save"

Shopify​

  1. Ve a Online Store > Themes
  2. Click "Edit code"
  3. Abre theme.liquid
  4. Pega el script antes de </head>

React / Next.js​

En tu archivo _app.js o layout principal:

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        defer
        data-domain="tusitio.com"
        src="https://tuapp.deployalo.com/js/script.js"
      />
      <Component {...pageProps} />
    </>
  )
}

Vue / Nuxt​

En nuxt.config.js:

export default {
  head: {
    script: [
      {
        defer: true,
        'data-domain': 'tusitio.com',
        src: 'https://tuapp.deployalo.com/js/script.js'
      }
    ]
  }
}

HTML estatico​

Simplemente agrega el script en el <head> de cada pagina:

<!DOCTYPE html>
<html>
<head>
  <title>Mi Sitio</title>
  <script defer data-domain="tusitio.com" src="https://tuapp.deployalo.com/js/script.js"></script>
</head>
<body>
  ...
</body>
</html>

Verificar instalacion​

  1. Abre tu sitio en el navegador
  2. Abre las DevTools (F12)
  3. Ve a la pestana "Network"
  4. Recarga la pagina
  5. Busca script.js - debe mostrar status 200
  6. Revisa tu dashboard de Plausible - deberia mostrar tu visita

Tracking de eventos personalizados​

Click en boton​

<button onclick="plausible('Signup')">Registrarse</button>

Con JavaScript​

// Trackear evento simple
plausible('Download')

// Trackear evento con propiedades
plausible('Purchase', {props: {plan: 'Pro', amount: 99}})

En React​

function handleClick() {
  window.plausible('Signup', {props: {source: 'homepage'}})
}

<button onClick={handleClick}>Registrarse</button>

Excluir paginas​

Para no trackear ciertas paginas (ej: admin):

<script defer data-domain="tusitio.com" data-exclude="/admin/*" src="https://tuapp.deployalo.com/js/script.js"></script>

Tracking de conversiones (Goals)​

  1. En Plausible, ve a Site Settings > Goals
  2. Click Add Goal
  3. Selecciona:
    • Pageview goal - Para trackear visitas a paginas especificas
    • Custom event goal - Para trackear eventos personalizados

Ejemplo: Trackear pagina de gracias​

  1. Agrega goal "Pageview" para /gracias
  2. Cuando alguien visite esa pagina, se registra la conversion

Ejemplo: Trackear registros​

  1. Agrega goal "Custom event" llamado Signup
  2. En tu formulario:
<form onsubmit="plausible('Signup')">
  ...
</form>