Wiki des éditeurs et encyclopédie d'intégration des widgets | PC Part Comparator

Monétisation et intégration des clés d'affiliation

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

Monétisation et intégration des clés d’affiliation

Les widgets de The Comparator permettent aux médias, aux testeurs et aux blogueurs techno de monétiser directement le trafic de recommandations de matériel. En injectant vos balises de suivi d’affiliation personnalisées dans nos suivis d’aubaines et nos intégrations de comparaison, 100 % des clics sortants sur les boutons « Aller à l’offre » portent vos identifiants d’affiliation.

1. Réseaux d’affiliation et paramètres pris en charge

Vous pouvez ajouter vos balises d’affiliation globalement par la configuration du widget, ou directement dans le code avec des attributs data-affiliate-* :

Magasin / réseau	Paramètre de la balise	Exemple de valeur	Réseaux pris en charge
Amazon US	`data-tag-amazon`	`mytechblog-20`	Amazon Associates
Newegg US	`data-tag-newegg`	`8483920`	Impact Radius / CJ Affiliate
Best Buy	`data-tag-bestbuy`	`bby-pub-99`	Impact

Exemple d’intégration standard avec des balises d’affiliation :

<iframe
 src="https://thecomparator.tech/widget/deal-monitor/?category=gpu&tag_amazon=myblog-20&tag_newegg=998811"
 width="100%"
 height="480"
 frameborder="0"
 loading="lazy"
 title="Suivi d'aubaines en direct pour cartes graphiques">
</iframe>

2. Règles de conformité et de libellé des appels à l’action

Pour protéger votre domaine d’éditeur et rester conforme à la FTC :

« Aller à l’offre » plutôt que « Acheter maintenant » :
- Nous exigeons que tous les boutons d’appel à l’action des widgets affichent « Aller à l’offre » (ou « Voir sur Amazon ») lorsque les prix sont des instantanés de marché dynamiques.
- « Acheter pour X $ » est strictement interdit, sauf si le prix est garanti en temps réel.
Instantanés de prix datés :
- Chaque prix d’offre affiché dans le widget porte un horodatage (p. ex. Prix au 4 août 2026).
Obligation de divulgation d’affiliation :
- Les éditeurs DOIVENT inclure une divulgation d’affiliation dans le texte, près du widget (p. ex. « Lorsque vous achetez par les liens de notre site, nous pouvons toucher une commission d’affiliation. »).

3. Optimiser les taux de clics

Préfiltrage contextuel par catégorie : intégrez les widgets de cartes graphiques dans les tests de cartes graphiques, ceux de processeurs dans les tests de processeurs et ceux de SSD NVMe dans les sélections de stockage.
Choisir le profil selon le contexte de l’article : utilisez preset=gaming-1440p pour les articles sur les jeux, ou preset=ai-llm pour les articles sur le matériel de station de travail et d’IA.
Harmonisation du thème : utilisez theme=auto pour que le widget épouse sans heurt le mode clair ou sombre de votre site.

🔗 Guides connexes pour éditeurs

🧩 : catalogue complet des extraits HTML et des options de configuration.
🎨 : règles sur le mode sombre et les conteneurs adaptatifs.
🎓 : aperçu de tous les outils et fonctions pour éditeurs.

Guide d'intégration des widgets pour éditeurs

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

Guide d’intégration des widgets pour éditeurs

The Comparator propose des widgets de valeur du matériel légers et interactifs que les éditeurs peuvent intégrer directement dans leurs tests techno et leurs guides d’achat.

1. Types de widgets et cas d’usage

Type de widget	Emplacement idéal dans l’article	Ce qu’il affiche
Suivi d’aubaines	Fiches de test de produit	Le plus bas prix actuel du marché, l’état du stock, la tendance des prix sur 30 jours
Indicateur de valeur	Conclusion ou verdict	Jauge de valeur algorithmique de 0 à 100 par rapport au marché
Comparaison face à face	Articles de comparaison de deux produits	Tableau comparatif des spécifications côte à côte et verdict

2. Intégration standard par iframe

Collez le code d’iframe adaptatif standard directement dans le bloc HTML de l’éditeur de votre article :

<!-- Widget de suivi d'aubaines 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 : instantané des prix et valeur">
</iframe>

3. Instructions propres à chaque plateforme de gestion de contenu

WordPress (éditeur Gutenberg)

Ajoutez un bloc HTML personnalisé dans l’éditeur de votre article.
Collez l’extrait <iframe> ci-dessus.
Enregistrez ou publiez votre article.

Ghost CMS

Cliquez sur l’icône + dans l’éditeur Ghost et choisissez Carte HTML.
Collez l’extrait <iframe>.

Webflow et plateformes personnalisées

Collez le code dans un composant d’intégration.

Vous pouvez passer des paramètres d’adresse pour personnaliser le comportement du widget :

theme=dark ou theme=light : impose un jeu de couleurs précis.
currency=USD : précise la devise du marché.
subid=your_publisher_tag : joint votre balise de suivi d’affiliation personnalisée.

Exemple :

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

Synchronisation des thèmes et iframes adaptatifs

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

Synchronisation des thèmes et architecture des iframes adaptatifs

Pour que les widgets s’intègrent sans heurt aux sites des éditeurs, sans barres de défilement ni écart de couleurs, The Comparator utilise assets/js/widget.js.

1. Comment fonctionne la synchronisation du thème

Les sites hôtes passent souvent du mode clair au mode sombre. Le widget intégré écoute les changements de thème de la fenêtre parente à l’aide de l’API HTML5 postMessage.

[Site hôte (parent)] ── postMessage({ type: 'tc-theme', theme: 'dark' }) ──> [Widget Comparator (iframe)]

Configuration du script sur le site hôte

Ajoutez le script léger widget.js au pied de votre page :

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

Ce script :

Détecte les changements de la classe dark sur document.documentElement ou document.body.
Vérifie localStorage.theme et prefers-color-scheme: dark.
Envoie des événements tc-theme à tous les iframes Comparator actifs de la page.

2. Redimensionnement automatique de la hauteur

Pour éviter les barres de défilement verticales dans l’iframe, le widget calcule dynamiquement la hauteur de son contenu et en informe la fenêtre parente :

// Exemple dans l'écouteur de 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. Repli sans JavaScript

Si le site hôte désactive JavaScript :

L’iframe revient à la valeur par défaut height="450" indiquée dans le HTML.
Le thème est celui du paramètre theme de l’adresse (?theme=light ou ?theme=dark).