> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tryprofound.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Instalar Profound Pixel

> Una guía paso a paso para instalar y usar tu Profound Pixel

Esta guía te explica todo lo que necesitas para empezar con Profound Pixel: obtener tu ID de píxel, añadir el fragmento de código a tu sitio web, y configurar y verificar el seguimiento de conversiones.

## Antes de empezar

Ten listos estos elementos antes de añadir cualquier código a tu sitio:

1. **Firma el anexo de procesamiento de datos.** El píxel envía a Profound datos de usuarios finales que tu acuerdo actual no cubre. Comunícate con tu representante de anuncios y no realices la instalación hasta que el anexo esté firmado.
2. **Indica tus dominios a tu equipo de Profound.** Cada ID de píxel tiene su propia lista de dominios permitidos, y los eventos de un dominio que no esté en la lista no se procesan. Comparte todos los nombres de host en los que instalarás el píxel.

## Pasos de instalación

<Steps>
  <Step id="step-1" title="Obtén tu ID de píxel">
    En la plataforma de Profound, ve a **Ad Manager** (en la barra lateral izquierda, en **Ads**), selecciona **Conversions** en la esquina superior derecha y, en **Your pixels**, selecciona **Generate pixel**.

    <Note>
      Cada ID de píxel cubre un sitio o entorno.
    </Note>
  </Step>

  <Step id="step-2" title="Añade el fragmento a tu sitio web">
    Instala el fragmento manualmente o mediante Google Tag Manager.

    <Tabs>
      <Tab title="Instalación manual">
        Pega este fragmento de código en el `<head>` de cada página que quieras medir y reemplaza `<YOUR_PIXEL_ID>` con el ID de píxel que obtuviste en el [paso 1](#step-1):

        ```html expandable theme={null}
          <script>
            (function (w, d, s, u) {
              try {
                if (w.pfq) return;
                var q = function () { q.q.push([].slice.call(arguments)); };
                q.q = [];
                w.pfq = q;
                var js = d.createElement(s);
                js.async = true;
                js.src = u;
                js.onerror = function () { w.pfq = function () {}; };
                var f = d.getElementsByTagName(s)[0];
                if (f && f.parentNode) f.parentNode.insertBefore(js, f);
                else d.head.appendChild(js);
              } catch (e) {}
            })(window, document, "script", "https://pixel.profound.click/sdk/v1/p.js");

            pfq("init", "<YOUR_PIXEL_ID>");
            pfq("track", "page_viewed");
          </script>
        ```

        Conserva ambas llamadas a la función `pfq`. Cumplen funciones distintas:

        * `pfq("init", …)` configura la gestión de identidad y consentimiento, y captura el ID de clic del anuncio desde la URL de destino. Por sí sola no registra nada.
        * `pfq("track", "page_viewed")` registra la vista de página. Sin ella, la página no informa nada.

        **Reglas de ubicación**:

        * Coloca el fragmento en cada página que quieras medir. Una buena práctica es añadirlo a todas las páginas mediante tu diseño global o plantilla base.
        * Colócalo en el `<head>`, lo antes posible. El fragmento debe ejecutarse antes de que cualquier cosa pueda reescribir la URL de destino, para evitar la pérdida de los ID de clic de anuncios.
        * Colócalo una sola vez por página. El fragmento ignora sus propias copias (`if (w.pfq) return`), pero la línea `page_viewed` no: las copias cuentan cada vista de página varias veces.

        <Note>
          **Las aplicaciones de una sola página deben registrar sus propias vistas de página.** El píxel no detecta los cambios de ruta, así que llama a `pfq('track', 'page_viewed')` una vez en cada cambio de ruta que quieras registrar.
        </Note>
      </Tab>

      <Tab title="Google Tag Manager">
        Si gestionas las etiquetas de tu sitio en Google Tag Manager, instala el píxel como una [etiqueta de HTML personalizado](https://support.google.com/tagmanager/answer/6107167):

        1. En Google Tag Manager, crea una nueva etiqueta y elige el tipo de etiqueta **Custom HTML**.
        2. Pega el fragmento de código de la pestaña **Instalación manual** y reemplaza `<YOUR_PIXEL_ID>` con el ID de píxel que obtuviste en el [paso 1](#step-1).
        3. Configura el activador como **Initialization - All Pages**.
        4. En **Advanced Settings** > **Tag firing options**, elige **Once per page**.
        5. En [Consent Settings](https://support.google.com/tagmanager/answer/10718549), elige **No additional consent required**.

        <Note>
          Los dos últimos ajustes pueden parecer demasiado permisivos, pero son intencionales: el píxel gestiona el consentimiento por sí mismo, y si se activa demasiado tarde pierde el ID de clic del anuncio, por lo que las conversiones no se pueden vincular a los anuncios.
        </Note>

        Si tu sitio es una aplicación de una sola página, añade una segunda etiqueta que llame a `pfq('track', 'page_viewed')` con un [activador de cambio de historial](https://support.google.com/tagmanager/answer/7679322), para que los cambios de ruta se registren como vistas de página.
      </Tab>
    </Tabs>
  </Step>

  <Step id="step-3" title="Configura tu postura de consentimiento">
    <Tip>
      Descubre cómo el píxel lee las señales de consentimiento y qué hace cada ajuste en [Consentimiento y privacidad](/es/pixel/consent-and-privacy#consent-handling).
    </Tip>

    El píxel se inicia en modo opt-in: no almacena ni envía nada hasta que una señal de consentimiento lo autoriza.

    Si tu sitio está en el Reino Unido, la UE o el Espacio Económico Europeo en general, no es necesario hacer nada. Tu plataforma de gestión del consentimiento (CMP) proporciona la señal de consentimiento al píxel.

    Si tienes un sitio solo para EE. UU., probablemente no tengas una CMP, así que debes configurar explícitamente la postura de consentimiento como opt-out para que el píxel pueda registrar eventos. Edita la línea `pfq("init", …)` dentro del fragmento que añadiste en el [paso 2](#step-2) para que pase la opción de postura:

    ```javascript theme={null}
      pfq("init", "<YOUR_PIXEL_ID>", { posture: "opt-out" });
    ```
  </Step>

  <Step id="step-4" title="(opcional) Permite el píxel en tu Content Security Policy">
    Si tu sitio aplica una [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) estricta, esta bloquea el píxel hasta que permitas los dominios de Profound.

    Añade estas directivas a tu política:

    * [`script-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src) `https://pixel.profound.click` permite que el navegador cargue el script del píxel.
    * [`connect-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/connect-src) `https://events.profound.click` permite que el píxel envíe eventos.

    El fragmento en línea del [paso 2](#step-2) también necesita un [nonce o hash](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src) en su bloque `<script>`, de la misma forma en que autorizas los demás scripts en línea de tu sitio.
  </Step>

  <Step id="step-5" title="Haz seguimiento de tus conversiones">
    El fragmento del [paso 2](#step-2) registra las vistas de página por sí solo, pero no puede saber cuándo un visitante se convierte en cliente. Tu sitio lo informa llamando a la función `pfq`, que el fragmento pone a disposición en cada página que lo incluye.

    <Tabs>
      <Tab title="Instalación manual">
        Añade una llamada a `pfq('track', …)` en el propio código de tu sitio en el momento en que se completa una conversión: en la página de confirmación del pedido, en el controlador de envío del formulario, o dondequiera que la conversión se vuelva definitiva. Usa el [nombre de evento](/es/pixel/events#standard-events) estándar que corresponda a la conversión y pasa los detalles que tengas, por ejemplo:

        ```javascript theme={null}
          pfq('track', 'items_added',   { amount: 4900,  currency: 'USD', product_id: 'SKU123' });
          pfq('track', 'order_created', { amount: 12999, currency: 'USD', order_id: 'A-1001' });
          pfq('track', 'lead_created',  { form: 'contact-sales' });
        ```
      </Tab>

      <Tab title="Google Tag Manager">
        Crea una [etiqueta de HTML personalizado](https://support.google.com/tagmanager/answer/6107167#custom-html-tag) adicional por cada tipo de conversión y actívala con el activador que marca esa conversión en tu sitio. Antepón `window.pfq &&` a cada llamada para que la etiqueta no haga nada si la etiqueta del fragmento de instalación del [paso 2](#step-2) nunca se ejecutó. Por ejemplo:

        ```html theme={null}
          <script>
            window.pfq && pfq('track', 'order_created', {
              order_id: {{DLV - transaction_id}},
              amount: Math.round(Number({{DLV - value}}) * 100),
              currency: {{DLV - currency}},
            });
          </script>
        ```

        **Notas**:

        * Los nombres de variables `{{DLV - …}}` anteriores son solo ejemplos. Usa los nombres de variables definidos en tu contenedor de Google Tag Manager. Obtén más información en la [documentación de variables de la capa de datos](https://support.google.com/tagmanager/answer/7683362).
        * El multiplicador `* 100` del ejemplo de código solo sirve para monedas con dos decimales, como USD o EUR. Para otras monedas, ajusta el multiplicador al número de decimales de la moneda.
      </Tab>
    </Tabs>

    <Tip>
      Para ver el desglose detallado de los eventos y sus campos, consulta la [referencia de eventos](/es/pixel/events).
    </Tip>
  </Step>

  <Step id="step-6" title="Verifica que funciona">
    Completa una conversión de prueba en tu propio sitio (por ejemplo, una compra de prueba). En la pestaña de red de tu navegador, filtra por `events.profound.click`.

    Localiza la solicitud de evento generada por tu conversión de prueba y comprueba lo siguiente:

    1. Es una solicitud `POST` con una respuesta de estado `202`.
    2. El campo `amount` del cuerpo de la carga útil es un número entero en unidades menores (la unidad más pequeña de la moneda dada): por ejemplo, un importe de 129.99 dólares estadounidenses debería mostrarse como `12999`. Si el importe que ves está en otras unidades, vuelve al código de seguimiento que añadiste en el [paso 5](#step-5) y corrige las unidades que envía.
    3. Si tu sitio recibe tráfico de Europa o del Reino Unido, prueba la conversión como un visitante europeo. Hasta que aceptes el banner de consentimiento, el píxel no debería enviar solicitudes ni escribir cookies. Después de aceptarlo, deberían aparecer solicitudes a `events.profound.click` en la pestaña de red, y las cookies del píxel deberían aparecer en el almacenamiento de cookies de tu navegador.

           <Tip>
             Simula una visita a tu sitio desde Europa usando una VPN o configurando una ubicación de la UE en las DevTools de tu navegador.
           </Tip>
  </Step>
</Steps>

Después de completar estos pasos, tu píxel debería estar configurado y listo para usarse. Si tienes problemas durante la configuración, consulta [Solución de problemas](/es/pixel/troubleshooting) para ver los problemas más comunes, o [contacta al equipo de soporte](mailto:support@tryprofound.com).
