Enciclopedia de Integración de Widgets para Editores | PC Part Comparator

Monetización e Integración de Claves de Afiliados

Tue, 04 Aug 2026 00:00:00 +0000

Monetización e Integración de Claves de Afiliados

Los widgets de The Comparator permiten a los editores de medios, analistas y blogueros tecnológicos monetizar el tráfico de recomendaciones de hardware directamente. Al integrar tus etiquetas de seguimiento de afiliados personalizadas en nuestros Monitores de Ofertas y comparadores integrables, el 100% de los clics salientes en los botones “Ir a la oferta” llevan tus IDs de afiliado.

1. Redes de Afiliación y Parámetros Compatibles

Puedes añadir etiquetas de afiliado globalmente mediante la configuración del widget o directamente en la etiqueta mediante atributos data-affiliate-*:

Tienda / Red	Parámetro de Etiqueta	Valor de Ejemplo	Redes Compatibles
Amazon US	`data-tag-amazon`	`mitienda-20`	Amazon Associates
Newegg US	`data-tag-newegg`	`8483920`	Impact Radius / CJ Affiliate
Best Buy	`data-tag-bestbuy`	`bby-pub-99`	Impact

Ejemplo de Integración Estándar con Etiquetas de Afiliado:

<iframe 
  src="https://thecomparator.tech/widget/deal-monitor/?category=gpu&tag_amazon=miblog-20&tag_newegg=998811" 
  width="100%" 
  height="480" 
  frameborder="0" 
  loading="lazy"
  title="Monitor de Ofertas de GPU en Vivo">
</iframe>

2. Normas de Cumplimiento y Texto de los Botones (CTA)

Para proteger el dominio de tu medio y cumplir con la normativa de transparencia publicitaria:

“Ir a la oferta” frente a “Comprar ahora”:
- Requerimos que todos los botones de llamada a la acción muestren “Ir a la oferta” (o “Ver en Amazon”) cuando los precios corresponden a instantáneas dinámicas de mercado.
- La expresión “Comprar por $X” está estrictamente prohibida a menos que el precio esté garantizado en tiempo real.
Instantáneas de Precios con Fecha:
- Cada precio mostrado dentro del widget incluye una marca de tiempo (ej. Precios a fecha de 4 de agosto de 2026).
Divulgación de Afiliados:
- Los editores DEBEN incluir un aviso de afiliados visible junto al widget (ej., “Al comprar a través de los enlaces de nuestro sitio, podemos recibir una comisión de afiliado.”).

3. Optimización del Ratio de Clics (CTR)

Pre-filtrado Contextual por Categoría: Integra widgets de GPU en análisis de tarjetas gráficas, widgets de CPU en análisis de procesadores y widgets de SSD NVMe en artículos de almacenamiento.
Alineación del Preajuste con el Artículo: Utiliza preset=gaming-1440p para artículos de videojuegos, o preset=ai-llm para artículos de estaciones de trabajo e inteligencia artificial.
Adaptación de Tema: Utiliza theme=auto para que el widget coincida con el modo claro u oscuro de tu sitio.

🔗 Guías Relacionadas para Editores

🧩 : Catálogo completo de fragmentos HTML y opciones de configuración.
🎨 : Reglas para modo oscuro y contenedores adaptativos.
🎓 : Resumen de todas las herramientas para editores.

Guía de Integración de Widgets para Editores

Mon, 01 Jan 0001 00:00:00 +0000

Guía de Integración de Widgets para Editores

The Comparator ofrece widgets interactivos y ligeros de valor de hardware que los editores pueden integrar directamente en sus análisis y guías de compra de tecnología.

1. Tipos de Widgets y Casos de Uso

Tipo de Widget	Ubicación Ideal en el Artículo	Qué Muestra
Monitor de Ofertas	Ficha de análisis de producto	Precio mínimo de mercado en vivo, stock, tendencia a 30 días
Indicador de Valor	Sección de conclusión / veredicto	Calibrador de Puntuación de Valor (0-100) relativo al mercado
Comparación Directa	Artículos de enfrentamientos cara a cara	Tabla comparativa de especificaciones y veredicto ganador

2. Integración Estándar mediante iFrame

Pega el código de iFrame adaptativo directamente en el bloque HTML de tu editor de artículos:

<!-- Widget Monitor de Ofertas de The Comparator -->
<iframe src="https://thecomparator.tech/embed/deal-ryzen-7-9800x3d.html" 
        width="100%" 
        height="450" 
        frameborder="0" 
        scrolling="no"
        loading="lazy" 
        title="AMD Ryzen 7 9800X3D — Precios y Puntuación de Valor">
</iframe>

3. Instrucciones Específicas por CMS

WordPress (Editor Gutenberg)

Añade un bloque de HTML Personalizado en tu artículo.
Pega el fragmento <iframe> mostrado arriba.
Guarda o publica tu artículo.

Ghost CMS

Haz clic en el icono + del editor de Ghost y selecciona HTML Card.
Pega el fragmento <iframe>.

Webflow / Plataformas Personalizadas

Pega el código dentro de un componente de Embed.

Puedes pasar parámetros de consulta en la URL para personalizar el comportamiento del widget:

theme=dark o theme=light: Fuerza un esquema de color específico.
currency=USD: Especifica la moneda del mercado.
subid=tu_etiqueta_editorial: Añade tu etiqueta de seguimiento de afiliados personalizada.

Ejemplo:

<iframe src="https://thecomparator.tech/embed/deal-ryzen-7-9800x3d.html?theme=dark&subid=techblog_analisis_2026" ...></iframe>

Sincronización de Tema e iFrames Adaptativos

Mon, 01 Jan 0001 00:00:00 +0000

Arquitectura de Sincronización de Tema e iFrames Adaptativos

Para garantizar que los widgets se integren a la perfección en los sitios de los editores sin barras de desplazamiento ni desajustes de color, The Comparator utiliza assets/js/widget.js.

1. Cómo Funciona la Sincronización de Tema

Los sitios web anfitriones suelen alternar entre modos Claro y Oscuro. El widget incrustado escucha los cambios de tema en la ventana principal mediante la API postMessage de HTML5.

[Sitio Anfitrión (Padre)] ── postMessage({ type: 'tc-theme', theme: 'dark' }) ──> [Widget Comparator (iFrame)]

Configuración del Script en el Sitio Anfitrión

Añade el script ligero widget.js en el pie de página de tu sitio:

<script src="https://thecomparator.tech/assets/js/widget.js" async></script>

Este script realiza automáticamente:

Detección de mutaciones de la clase dark en document.documentElement o document.body.
Comprobación de localStorage.theme y prefers-color-scheme: dark.
Envío de eventos tc-theme a todos los iFrames de The Comparator activos en la página.

2. Ajuste Automático Dinámico de Altura

Para evitar barras de desplazamiento verticales dentro del iFrame, el widget calcula su altura de contenido dinámicamente y se la comunica a la ventana principal:

// Ejemplo del receptor en widget.js
window.addEventListener('message', function(event) {
    if (event.data && event.data.type === 'tc-resize') {
        const iframe = document.querySelector(`iframe[src*="${event.data.widgetId}"]`);
        if (iframe) {
            iframe.style.height = event.data.height + 'px';
        }
    }
});

3. Comportamiento sin JavaScript

Si el sitio anfitrión tiene JavaScript desactivado:

El iFrame utiliza la altura predeterminada height="450" especificada en el HTML.
El tema se basa en el parámetro theme especificado en la URL (?theme=light o ?theme=dark).

Enciclopedia de Integración de Widgets para Editores | PC Part Comparator

Monetización e Integración de Claves de Afiliados

Monetización e Integración de Claves de Afiliados

1. Redes de Afiliación y Parámetros Compatibles

Ejemplo de Integración Estándar con Etiquetas de Afiliado:

2. Normas de Cumplimiento y Texto de los Botones (CTA)

3. Optimización del Ratio de Clics (CTR)

🔗 Guías Relacionadas para Editores

Guía de Integración de Widgets para Editores

Guía de Integración de Widgets para Editores

1. Tipos de Widgets y Casos de Uso

2. Integración Estándar mediante iFrame

3. Instrucciones Específicas por CMS

WordPress (Editor Gutenberg)

Ghost CMS

Webflow / Plataformas Personalizadas

4. Personalización de Parámetros del Widget

Sincronización de Tema e iFrames Adaptativos

Arquitectura de Sincronización de Tema e iFrames Adaptativos

1. Cómo Funciona la Sincronización de Tema

Configuración del Script en el Sitio Anfitrión

2. Ajuste Automático Dinámico de Altura

3. Comportamiento sin JavaScript