Crear un widget personalizado

Desarrolla herramientas dinámicas que permitan a los partners promocionar tu marca. Los widgets personalizados te permiten incrustar herramientas o páginas alojadas externamente directamente en la interfaz de impact.com mediante un iframe. Usa esta guía para crear y configurar un widget de contenido personalizado que proporcione recursos personalizados y una experiencia de marca coherente para tus partners.

1

Accede al creador de widgets personalizados

1. En el menú de navegación de la izquierda, selecciona [Participación] → Contenido → Widgets.
2. En la esquina superior derecha, selecciona Crear widget → Personalizado.

2

Introduce los detalles del widget

1. Introduce un Nombre del widget personalizado.
2. Opcionalmente, introduce una Descripción para el widget personalizado.
3. Opcionalmente, introduce una Etiqueta para el widget personalizado.
4. Si es necesario, [Activar] Restringir acceso de partners para especificar los partners y grupos individuales que deben tener acceso al widget.

   • Partners: Introduce el nombre de los partners que pueden acceder al widget personalizado.
   • Grupos: Introduce el nombre de los grupos que pueden acceder al widget personalizado.

3

Configura el widget

1. Selecciona cómo se comporta el widget entre las opciones de visualización:

   • Abrir en una nueva pestaña: Abre la URL alojada en una pestaña separada.
   • Incrustar en impact.com: Muestra el widget directamente dentro de la interfaz de la plataforma.
2. Opcionalmente, desde la Imagen previa sección, selecciona Elegir archivo para subir una miniatura. Asegúrate de que el archivo sea GIF, JPG o PNG y no supere los 512 KB.
3. En el campo URL del widget introduce la dirección web donde está alojado tu widget.
4. Desde el [Menú desplegable], selecciona el protocolo (p. ej., https://) que coincida con la seguridad de tu sitio.
5. Opcionalmente, selecciona [Agregar] Insertar campos dinámicos para expandir la lista de tokens.
6. Localiza el token que quieras usar y selecciona Insertar. La plataforma añadirá automáticamente el token (p. ej., {irpid}) a tu URL del widget. Consulta la sección de tokens de campos dinámicos más abajo para obtener una descripción de cada token.

4

Actualizar la configuración avanzada

Desde el Idioma [Menú desplegable], selecciona el idioma en el que se mostrará este widget.

5

Finaliza el widget personalizado

Selecciona Crear para guardar tu widget. Los partners pueden encontrar este widget en Widgets de contenido.

sección de tokens de campos dinámicos

Token	Descripción
{click_url_encoded}	URL de clic codificada
{click_url}	URL de clic sin codificar
{irimpurl}	Nuestra URL de impresión
{irpid}	ID del partner
{subid1}	Sub-ID 1 del partner
{subid2}	Sub-ID 2 del partner
{subid3}	Sub-ID 3 del partner
{sharedId}	ID compartido
{iradid}	ID del anuncio
{ircid}	ID del programa
{click_url_encoded_deeplink}	URL de clic codificada con el parámetro de deep link añadido.

Ejemplos prácticos

Acerca de estos ejemplos: Los widgets personalizados los creas y alojas tú — impact.com solo incrusta la página alojada e inyecta en ella datos en tiempo real del partner. Copia las implementaciones de referencia de abajo, alójalas en tu propio dominio y adáptalas. Los partners nunca editan ningún código; solo abren el widget terminado desde Widgets de contenido.

Cómo llegan los tokens de campos dinámicos a tu widget

Cuando añades un token de campo dinámico a la URL del widget, impact.com lo sustituye por los valores reales de cada partner antes de cargar tu página. Tu página lee esos valores de su cadena de consulta y los usa para crear enlaces rastreables.

Por ejemplo, si configuras la URL del widget a https://widgets.yourbrand.com/search?partner={irpid}&clickurl={click_url_encoded}, impact.com carga lo siguiente para un partner cuyo ID es 123456:

https://widgets.yourbrand.com/search?partner=123456&clickurl=https%3A%2F%2Facme.sjv.io%2Fc%2F123456%2F789012%2F3456

Pasa la URL de clic como {click_url_encoded}, no como {click_url} — una URL de clic sin procesar contiene sus propios ? y & caracteres, que rompen tu cadena de consulta. Decodifícala en tu página antes de usarla.

Ejemplo 1: widget de búsqueda

Permite que un partner busque en tu catálogo y copie un enlace rastreable para cualquier producto sin salir de impact.com. Tú alojas la página de búsqueda; impact.com pasa el ID y la URL de clic del partner para que cada enlace de resultado se atribuya a ese partner.

1. Aloja la página de búsqueda en un dominio que controles, mediante HTTPS (p. ej., https://widgets.yourbrand.com/search). Sustituye la CATALOG de muestra por una llamada a tu propio catálogo de productos o API de búsqueda.
2. Crea el widget personalizado usando los cinco pasos anteriores. En Configura el widget, configura el URL del widget para tu página con los {irpid} y {click_url_encoded} tokens (mostrados abajo).
3. Prueba con Abrir en una nueva pestaña, realiza una búsqueda como partner de prueba y confirma que los enlaces de resultados resuelvan en tu sitio y registren un clic. Luego cambia el widget a Incrustar en impact.com.

URL del widget

https://widgets.yourbrand.com/search?partner={irpid}&clickurl={click_url_encoded}

search-widget.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Búsqueda de productos</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 0; padding: 16px; }
    .search-bar { display: flex; gap: 8px; margin-bottom: 16px; }
    .search-bar input { flex: 1; padding: 10px; font-size: 16px; }
    .search-bar button { padding: 10px 16px; font-size: 16px; cursor: pointer; }
    .result { padding: 12px; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 8px; }
    .result a { text-decoration: none; font-weight: bold; }
    .copy { margin-left: 8px; font-size: 13px; color: #2b6cb0; cursor: pointer; }
  </style>
</head>
<body>
  <div class="search-bar">
    <input id="q" type="text" placeholder="Buscar productos..." />
    <button id="go">Buscar</button>
  </div>
  <div id="results"></div>

  <script>
    // 1. Lee los valores que impact.com inyectó en la URL del widget.
    var params    = new URLSearchParams(window.location.search);
    var partnerId = params.get('partner') || '';
    var clickUrl  = decodeURIComponent(params.get('clickurl') || '');

    // 2. Sustituye esta matriz de muestra por una llamada a tu propio catálogo de productos / API de búsqueda.
    var CATALOG = [
      { name: 'Zapatilla Trail Runner',   url: 'https://www.yourbrand.com/products/trail-runner' },
      { name: 'Chaqueta impermeable',   url: 'https://www.yourbrand.com/products/waterproof-jacket' },
      { name: 'Calcetines de senderismo de merino', url: 'https://www.yourbrand.com/products/merino-socks' }
    ];

    // 3. Construye un deep link rastreable: la URL de clic del partner + la página de destino.
    //    Confirma el formato exacto de deep link de tu programa antes de publicarlo (consulta "Antes de publicar").
    function buildTrackingLink(destinationUrl) {
      if (!clickUrl) return destinationUrl;            // fallback: sin seguimiento si falta el token
      return clickUrl + encodeURIComponent(destinationUrl);
    }

    function search() {
      var term = document.getElementById('q').value.toLowerCase();
      var matches = CATALOG.filter(function (p) {
        return p.name.toLowerCase().indexOf(term) !== -1;
      });
      var container = document.getElementById('results');
      container.innerHTML = matches.length ? '' : '<p>No se encontraron productos.</p>';
      matches.forEach(function (p) {
        var link = buildTrackingLink(p.url);
        var row = document.createElement('div');
        row.className = 'result';
        row.innerHTML =
          '<a href="' + link + '" target="_blank" rel="noopener">' + p.name + '</a>' +
          '<span class="copy" data-link="' + link + '">Copiar enlace</span>';
        container.appendChild(row);
      });
    }

    document.getElementById('go').addEventListener('click', search);
    document.getElementById('q').addEventListener('keyup', function (e) {
      if (e.key === 'Enter') search();
    });
    document.addEventListener('click', function (e) {
      if (e.target.classList.contains('copy')) {
        navigator.clipboard.writeText(e.target.getAttribute('data-link'));
      }
    });
  </script>
</body>
</html>

Ejemplo 2: anuncio dinámico de rich media (widget flotante de chat)

Un anuncio dinámico de rich media es cualquier activo HTML interactivo que alojas e incrustas como widget. En este ejemplo, crearás una burbuja flotante de chat que se expande en un mensaje promocional y una llamada a la acción. Cuando el visitante selecciona el botón, se redirige a través de la URL de clic del partner, de modo que el clic se rastrea y se atribuye.

1. Aloja la página en un dominio que controles, mediante HTTPS (p. ej., https://widgets.yourbrand.com/chat). Personaliza el texto, los colores y la llamada a la acción para que coincidan con tu campaña.
2. Crea el widget personalizado usando los cinco pasos anteriores, configurando la URL del widget con el {click_url_encoded} token (mostrado abajo).
3. Prueba con Abrir en una nueva pestaña como partner de prueba, confirma que la llamada a la acción abra tu sitio y registre un clic; luego cambia el widget a Incrustar en impact.com.

URL del widget

https://widgets.yourbrand.com/chat?clickurl={click_url_encoded}

Para enviar a los visitantes a una página específica en lugar de tu página de destino predeterminada, usa el {click_url_encoded_deeplink} token en lugar de {click_url_encoded}, o añade el destino en tu propio código como se muestra en el Ejemplo 1.

chat-widget.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Asistente</title>
  <style>
    html, body { margin: 0; height: 100%; background: transparent; font-family: Arial, sans-serif; }
    #bubble {
      position: fixed; bottom: 20px; right: 20px;
      width: 60px; height: 60px; border-radius: 50%;
      background: #2b6cb0; color: #fff; font-size: 26px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25);
    }
    #panel {
      position: fixed; bottom: 90px; right: 20px; width: 260px;
      background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.2);
      padding: 16px; display: none;
    }
    #panel.open { display: block; }
    #panel p { margin: 0 0 12px; font-size: 14px; color: #333; }
    #cta {
      display: block; width: 100%; padding: 10px; border: none; border-radius: 6px;
      background: #2b6cb0; color: #fff; font-size: 15px; cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="bubble">&#128172;</div>
  <div id="panel">
    <p>¡Hola! ¿Buscas nuestras últimas ofertas? Toca abajo para comprar y ahorrar.</p>
    <button id="cta">Comprar ahora</button>
  </div>

  <script>
    // impact.com inyecta la URL de clic del partner en esta página.
    var params   = new URLSearchParams(window.location.search);
    var clickUrl = decodeURIComponent(params.get('clickurl') || '');

    var bubble = document.getElementById('bubble');
    var panel  = document.getElementById('panel');
    bubble.addEventListener('click', function () {
      panel.classList.toggle('open');
    });

    document.getElementById('cta').addEventListener('click', function () {
      if (!clickUrl) return;
      // Abrir en una nueva pestaña para que el clic se rastree y se atribuya al partner.
      window.open(clickUrl, '_blank', 'noopener');
    });
  </script>
</body>
</html>

Antes de publicar

• Aloja el contenido tú mismo, mediante HTTPS. impact.com incrusta tu página mediante un iframe o la abre en una nueva pestaña — no aloja tu código. En modo incrustado, tu página se ejecuta dentro de un iframe, así que abre los enlaces de destino con target="_blank" o window.open(...) en lugar de navegar la ventana principal.
• Codifica la URL de clic. Pásala como {click_url_encoded} y decodifícala en tu página para que sus propios ? y & caracteres no rompan tu cadena de consulta.
• Confirma el formato de tu deep link con tu ingeniero de integración de impact.com y asegúrate de que los destinos estén cubiertos por tus dominios permitidos para deep linking.

Recursos adicionales

• Crear y compartir enlaces de seguimiento con partners — Cómo crear enlaces de seguimiento y compartirlos con tus partners.
• Explicación de los parámetros de los enlaces de seguimiento — La estructura de un enlace de seguimiento y los parámetros que puedes añadir, como sub-ID, ID compartido y deep links.
• Configurar dominios permitidos para deep linking — Autoriza los dominios de destino a los que se permite a los partners hacer deep link en tu sitio.
• Introducción a los tipos de activos — Los tipos de activos que puedes ofrecer a los partners, incluido dónde encaja el widget personalizado.
• De Rakuten Advertising a impact.com: pasos clave de transición — Qué cambia cuando migras un programa de Rakuten Advertising a impact.com.