Instala el tracker en cualquier plataforma, desde HTML plano hasta Next.js y SvelteKit.

Hay dos formas de instalar el tracker: una etiqueta de script o el paquete de npm. Ambas hacen exactamente lo mismo. Usa el script en sitios que editas como HTML, y npm en apps con bundler.

Etiqueta de script

<script src="https://collector.launchpulse.dev/lp.js"></script>
<script>LaunchPulse.init("lp_pub_yourkey");</script>

Esto define window.LaunchPulse y, después de init(), también define window.lp como atajo.

npm

npm i @basekick-labs/launchpulse

import { LaunchPulse } from "@basekick-labs/launchpulse";

if (typeof window !== "undefined") LaunchPulse.init("lp_pub_yourkey");

El paquete no tiene dependencias, pesa alrededor de 1,9 kB gzip y usa licencia MIT.

Seguro con SSR: en el servidor el export es undefined. Protege siempre con typeof window !== 'undefined', o llama a init() dentro de un hook que solo corra en el cliente. Todos los ejemplos de abajo lo hacen.

Sobre tu clave

Tu clave pública es lp_pub_ seguido de 22 caracteres base58. Está diseñada para viajar en el código del cliente: ponerla en tu HTML o en tu bundle es seguro y es lo esperado.

Existe además una clave secreta, lp_sec_ seguida de 43 caracteres, para ingesta desde el servidor. Se muestra una sola vez al crearla y nunca debe aparecer en código del navegador.

Dónde va el snippet

Plataforma	Dónde	Instalación
HTML plano	`<head>`, o justo antes de `</body>`	script
WordPress	Header del tema antes de `</head>`, o un plugin de scripts	script
Ghost	Configuración → Inyección de código → Site Header	script
Joomla	Módulo HTML personalizado en una posición de cabecera	script
Webflow	Project Settings → Custom Code → Head Code	script
Shopify	`theme.liquid`, antes de `</head>`	script
Astro	`<head>` del layout base	script
Next.js	Componente cliente en `app/layout.tsx`	npm
React	Componente raíz, dentro de un `useEffect`	npm
Vue	`main.ts` después de `createApp`, o `onMounted` en `App.vue`	npm
SvelteKit	`+layout.svelte` raíz, dentro de `onMount`	npm
Otra	`<head>` del HTML, o npm en una app con bundler	script

HTML plano

Pega la etiqueta en el <head> de cada página que quieras medir. Justo antes de </body> también funciona.

WordPress

Dos opciones:

Header del tema — Apariencia → Editor de archivos de tema → header.php, pega antes de </head>. Ojo: una actualización del tema puede sobrescribirlo.
Un plugin de scripts de header/footer — WPCode o similar. Sobrevive a las actualizaciones del tema, así que es la opción más segura.

Ghost

Panel de Ghost → Configuración → Inyección de código → Site Header. Pega la etiqueta y guarda.

Joomla

Agrega un módulo HTML personalizado asignado a una posición de cabecera, con el editor en modo código. También puedes pegar la etiqueta dentro del <head> del index.php de tu plantilla.

Webflow

Project Settings → Custom Code → Head Code. Pega la etiqueta y vuelve a publicar el sitio: el código personalizado solo corre en el sitio publicado, no en el diseñador.

Shopify

Edita el theme.liquid de tu tema y pega la etiqueta justo antes de </head>. Con eso cubres todas las páginas de la tienda.

Astro

Agrégalo al <head> de tu layout base:

---
// src/layouts/Base.astro
---
<head>
  <script is:inline src="https://collector.launchpulse.dev/lp.js"></script>
  <script is:inline>LaunchPulse.init("lp_pub_yourkey");</script>
</head>

is:inline evita que Astro procese y empaquete las etiquetas.

Next.js (App Router)

Crea un componente cliente y móntalo en tu layout raíz.

// app/launchpulse.tsx
"use client";

import { useEffect } from "react";
import { LaunchPulse } from "@basekick-labs/launchpulse";

export function LaunchPulseTracker() {
  useEffect(() => {
    LaunchPulse.init("lp_pub_yourkey");
  }, []);

  return null;
}

// app/layout.tsx
import { LaunchPulseTracker } from "./launchpulse";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <body>
        <LaunchPulseTracker />
        {children}
      </body>
    </html>
  );
}

En el Pages Router, monta el mismo componente en _app.tsx.

React

Llama a init() una sola vez en tu componente raíz:

// src/App.tsx
import { useEffect } from "react";
import { LaunchPulse } from "@basekick-labs/launchpulse";

export default function App() {
  useEffect(() => {
    LaunchPulse.init("lp_pub_yourkey");
  }, []);

  return <YourApp />;
}

El arreglo de dependencias vacío importa: init() debe correr una vez por carga de página.

Vue

En tu archivo de entrada, después de crear la app:

// src/main.ts
import { createApp } from "vue";
import { LaunchPulse } from "@basekick-labs/launchpulse";
import App from "./App.vue";

createApp(App).mount("#app");

if (typeof window !== "undefined") LaunchPulse.init("lp_pub_yourkey");

O dentro de App.vue:

<script setup lang="ts">
import { onMounted } from "vue";
import { LaunchPulse } from "@basekick-labs/launchpulse";

onMounted(() => {
  LaunchPulse.init("lp_pub_yourkey");
});
</script>

SvelteKit

Usa onMount en el layout raíz: solo corre en el navegador, así que el SSR queda a salvo.

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { onMount } from "svelte";
  import { LaunchPulse } from "@basekick-labs/launchpulse";

  onMount(() => {
    LaunchPulse.init("lp_pub_yourkey");
  });
</script>

<slot />

Otras plataformas

Si tu plataforma te deja editar HTML, pon la etiqueta en el <head>. Si es una app JavaScript con bundler, usa el paquete de npm con la protección typeof window.

Collector self-hosted

El collector por defecto es https://collector.launchpulse.dev, por eso los snippets que genera la app omiten la opción collector. Solo necesitas definirla en un despliegue propio:

LaunchPulse.init("lp_pub_yourkey", { collector: "https://collector.example.com" });

Qué obtienes automáticamente

$pageview se dispara en init() y en la navegación de SPA. El tracker intercepta history.pushState e history.replaceState, más popstate, y deduplica por ruta y query string: así una SPA que llama a replaceState todo el tiempo no infla tu conteo de vistas.

$identify se emite cuando llamas a identify(). Llámalo antes de tu evento de primer valor para que el evento se pueda asociar a un usuario.

Verifica que funciona

Abre tu sitio y revisa la vista de depuración de tu proyecto: todos los eventos aparecen ahí en vivo. El recorrido completo está en Inicio rápido, paso 6.

Recuerda: mientras tu proyecto está en estado de configuración, no se guarda nada. Mira Salir en vivo.

Instalación