# Un carrousel HubSpot qui rechargeait la page à chaque clic « j’aime »

> Un simple clic sur un bouton « j'aime » d'un widget HubSpot déclenchait une requête AJAX répétée qui rafraîchissait toute la page produit. Diagnostic d'un widget mal isolé sur une vitrine e-commerce.

- Auteur : WordPress Développement
- Publié le : 2022-12-08
- Mis à jour le : 2022-12-08
- Catégorie : Performance
- URL : https://www.wpmoderne.fr/performance/carrousel-hubspot-rechargeait-page-clic-jaime/

## L’essentiel

- Un widget mal isolé peut interférer avec le DOM de toute la page
- Une iframe différée isole l'exécution sans bloquer le reste du site
- Vérifier le fichier réseau avant de blâmer le thème

Quatorze requêtes réseau déclenchées par un unique clic sur un bouton « j'aime » : c'est ce qu'a révélé l'onglet Network des DevTools Chrome sur une page vitrine e-commerce intégrant un widget social HubSpot, censé simplement compter les interactions positives sur un carrousel de témoignages clients. L'équipe avait d'abord suspecté un problème de cache de page, la page semblant se recharger visuellement à chaque clic.

## Symptôme : une page qui semble se recharger sans raison

Le comportement observé côté utilisateur : un léger scintillement de toute la page produit, y compris des zones sans rapport avec le carrousel, immédiatement après chaque clic sur le bouton « j'aime » d'un témoignage. Ce scintillement laissait penser à un rechargement complet, mais l'URL ne changeait pas et aucune navigation n'apparaissait dans l'historique du navigateur, ce qui orientait plutôt vers un rafraîchissement partiel du DOM déclenché par JavaScript.

## Diagnostic : un widget non isolé qui manipule le DOM global

L'inspection du script HubSpot intégré directement dans le thème (et non via une iframe, contrairement aux recommandations du fournisseur) a révélé que le widget, à chaque interaction, relançait une fonction d'initialisation globale censée ne s'exécuter qu'au chargement initial de la page. Cette fonction réattachait des écouteurs d'événements sur l'ensemble des éléments interactifs de la page, y compris ceux appartenant au thème WooCommerce, provoquant ce scintillement visuel et les quatorze requêtes réseau observées (récupération de scripts de configuration déjà chargés, requêtes de tracking dupliquées, appel de recalcul de mise en page).

```
// Extrait simplifié du script HubSpot intégré directement dans le thème
document.addEventListener( 'click', function ( e ) {
    if ( e.target.closest( '.hs-like-button' ) ) {
        window.HubSpotWidget.reinitialize(); // ré-exécute TOUT le widget
    }
});
```

> L'essentiel à retenir : Un widget mal isolé peut interférer avec le DOM de toute la page ; Une iframe différée isole l'exécution sans bloquer le reste du site ; Vérifier le fichier réseau avant de blâmer le thème

Cette fonction `reinitialize()`, documentée par HubSpot comme destinée à être appelée après un changement de contenu dynamique de page (pertinent sur une single-page application), n'avait aucune raison d'être déclenchée sur un simple clic « j'aime » dans ce contexte. L'intégrateur initial l'avait ajoutée par excès de prudence, en copiant un exemple de documentation générique sans l'adapter au cas d'usage réel.

## Correctif : isoler le widget en iframe différée

Plutôt que de corriger uniquement l'appel erroné à `reinitialize()`, ce qui aurait laissé le widget capable d'interagir avec le DOM global du site à l'avenir, le choix a été fait de l'isoler complètement dans une iframe, chargée seulement au moment où le carrousel entre dans le viewport :

```
const carrousel = document.querySelector( '#temoignages-carrousel' );
const observer = new IntersectionObserver( ( entries ) => {
    if ( entries[0].isIntersecting ) {
        const iframe = document.createElement( 'iframe' );
        iframe.src = '/widgets/hubspot-temoignages.html';
        iframe.loading = 'lazy';
        carrousel.appendChild( iframe );
        observer.disconnect();
    }
}, { threshold: 0.2 } );

observer.observe( carrousel );
```

Le fichier `hubspot-temoignages.html`, servi de façon statique, contient le script HubSpot dans son propre contexte d'exécution isolé (le sandbox natif d'une iframe), ce qui empêche par construction toute interaction future avec le DOM de la page parente, quelle que soit l'évolution du script HubSpot lui-même.

## Résultat et prévention

Après ce changement, un clic sur le bouton « j'aime » ne déclenche plus qu'une seule requête réseau, celle strictement nécessaire à l'enregistrement du vote côté HubSpot, sans plus aucun scintillement visuel ni impact sur le reste de la page. Cette isolation en iframe est désormais la règle systématique appliquée à tout widget tiers intégré sur les pages vitrines de ce projet, indépendamment du fournisseur.

- Toujours privilégier l'intégration en iframe recommandée par le fournisseur plutôt qu'un script inline copié dans le thème.
- Vérifier dans l'onglet Network le nombre de requêtes déclenchées par une interaction censée être simple.
- Ne jamais laisser un widget tiers réattacher des écouteurs d'événements sur des éléments qui ne lui appartiennent pas.

> Un widget qui « scintille » à chaque clic n'a presque jamais un problème de cache : il a un problème d'isolation.

## En résumé

Ce qui ressemblait à un problème de cache de page était en réalité un widget HubSpot mal isolé, réinitialisant l'intégralité de son script à chaque clic et interférant avec le DOM global de la page produit. L'isolation complète en iframe différée, plutôt qu'un simple correctif ponctuel du code déclencheur, garantit qu'un futur changement côté HubSpot ne pourra plus reproduire le même symptôme.