AnchorLabs su Shopify, Ghost e Drupal: integrazione in CMS non-WordPress senza rischi

WordPress domina l'editoria ma non la esaurisce. Una fetta significativa di testate italiane gira su Ghost (blog d'autore, indie-publishing), su Drupal (siti istituzionali con requisiti editoriali complessi), o su Shopify (negozi che hanno costruito una sezione editoriale per SEO). AnchorLabs funziona su tutti e tre, perché è un runtime client-side che dipende solo dal DOM. Questa guida copre l'integrazione su ciascun CMS, con i dettagli specifici che fanno la differenza.

Al termine hai uno snippet attivo, selettore corretto, verifica in console fatta, e una checklist dei troubleshooting tipici per ciascun CMS.

Prerequisiti (tutti e tre i CMS)

• Tenant ID AnchorLabs (richiesta su /#attiva).
• Accesso admin al CMS per modificare template o injection points.
• Un articolo con contenuto sostanzioso per testare il selettore.

Ghost: integrazione in 5 minuti

Ghost è il CMS più lineare tra i tre. L'injection è nativa.

Step 1 — Code Injection

Vai in Ghost Admin → Settings → Advanced → Code Injection. Nel campo "Site Footer" inserisci:

<script>
  window.AnchorLabsConfig = {
    tenant: "IL_TUO_TENANT_ID",
    scope: [".gh-content"]
  };
</script>
<script
  src="https://anchor.widgetbay.3labs.it/runtime.js"
  defer
></script>

Salva. Lo script è attivo su tutte le pagine del sito. Se preferisci caricarlo solo sui post, usa il selettore "Post" nello stesso pannello (Ghost separa Site/Post/Pages).

Step 2 — selettore per temi Ghost

Tema Ghost	Selettore consigliato
Casper (default)	.gh-content
Source	.gh-content
Dawn	.gh-content
Tema custom	ispeziona {{content}} nel template Handlebars

Il selettore .gh-content è generato dall'helper Handlebars {{content}} in tutti i temi ufficiali. Su temi custom che usano {{content}} direttamente, la classe è la stessa. Su temi che wrappano il contenuto in un <div> custom, verifica in DevTools.

Step 3 — verifica

Apri un post pubblicato, passa il mouse su una keyword prodotto. Se il tooltip non compare, apri la console e cerca errori. Su Ghost il problema tipico è la content-security-policy dell'hosting managed (Ghost(Pro) o Ghost Cloud): aggiungi https://anchor.widgetbay.3labs.it alla allowlist tramite le impostazioni del tuo piano.

Step 4 — lazy loading di Ghost

Ghost usa lazy loading nativo per immagini, non per paragrafi. AnchorLabs scansiona il testo, che è già nel DOM al primo render. Nessuna configurazione aggiuntiva necessaria.

Drupal 10: integrazione via tema o custom module

Drupal offre due vie: modifica del custom theme oppure implementazione di un hook in un custom module. La seconda è più pulita per sys-admin, la prima più rapida.

Step 1 — via custom theme

Apri il file layout.html.twig (o page.html.twig a seconda della struttura) del tuo custom theme. Aggiungi prima della chiusura di </body>:

<script>
  window.AnchorLabsConfig = {
    tenant: "{{ anchorlabs_tenant_id }}",
    scope: [".node__content", "article .field--type-text-with-summary"],
    rerouteStrategy: "history"
  };
</script>
<script src="https://anchor.widgetbay.3labs.it/runtime.js" defer></script>

La variabile {{ anchorlabs_tenant_id }} va passata via hook_preprocess_page() in theme.theme o hardcoded in Twig se preferisci.

Step 2 — via custom module con hook_page_attachments()

Variante più Drupal-idiomatica:

// modules/custom/anchorlabs/anchorlabs.module

/**
 * Implements hook_page_attachments().
 */
function anchorlabs_page_attachments(array &$attachments) {
  $attachments['#attached']['html_head'][] = [
    [
      '#type' => 'html_tag',
      '#tag' => 'script',
      '#value' => 'window.AnchorLabsConfig = { tenant: "IL_TUO_TENANT_ID", scope: [".node__content"], rerouteStrategy: "history" };',
    ],
    'anchorlabs-config',
  ];
  $attachments['#attached']['html_head'][] = [
    [
      '#type' => 'html_tag',
      '#tag' => 'script',
      '#attributes' => [
        'src' => 'https://anchor.widgetbay.3labs.it/runtime.js',
        'defer' => TRUE,
      ],
    ],
    'anchorlabs-runtime',
  ];
}

Step 3 — selettore Drupal

I selettori dipendono dal tipo di content e dal tema:

Scenario	Selettore
Tema standard con nodo Article	.node__content
Field specifico body	article .field--name-body
Tema Layout Builder	.layout__region--content
Custom content type	ispeziona il wrapper del corpo

Step 4 — BigPipe e LazyBuilder

Se usi BigPipe (modulo standard da Drupal 8+), alcuni blocchi arrivano dopo il primo paint. Il corpo articolo non è mai in BigPipe di default, quindi non c'è problema. Ma se hai configurato custom LazyBuilder che carica il body lazy, aggiungi rerouteStrategy: "history" e un listener manuale:

Drupal.behaviors.anchorLabsRescan = {
  attach: function (context, settings) {
    if (window.anchorLabs?.rescan) {
      window.anchorLabs.rescan(context);
    }
  }
};

Step 5 — verifica Drush

Dopo aver aggiunto lo snippet ricarica i template: drush cr. Apri un nodo Article, verifica che i tooltip compaiano.

Shopify: integrazione per blog e product pages

Shopify è il caso più specifico perché il DOM è pesantemente generato da Liquid e spesso il "blog" è una sotto-sezione dello shop.

Step 1 — theme.liquid

Accedi al tema attivo via Online Store → Themes → Actions → Edit Code. Apri layout/theme.liquid. Prima di </body> aggiungi:

<script>
  window.AnchorLabsConfig = {
    tenant: "IL_TUO_TENANT_ID",
    scope: [".article__body", ".rte"],
    rerouteStrategy: "history"
  };
</script>
<script src="https://anchor.widgetbay.3labs.it/runtime.js" defer></script>

Il selettore .article__body copre i post del blog Shopify sui temi Online Store 2.0. Il selettore .rte copre il rich-text generato su product description se vuoi attivare AnchorLabs anche lì. Decidi in base al tuo caso: tipicamente solo blog, non product pages.

Step 2 — solo sul blog

Se vuoi limitare lo script solo alle pagine del blog (tipico caso: hai un negozio con una sezione editoriale SEO-driven), usa un wrap condizionale:

{% if template contains 'article' or template contains 'blog' %}
  <script>
    window.AnchorLabsConfig = { tenant: "...", scope: [".article__body"] };
  </script>
  <script src="https://anchor.widgetbay.3labs.it/runtime.js" defer></script>
{% endif %}

Step 3 — Shopify Plus con GTM

Se sei su Shopify Plus, l'approccio più pulito è Google Tag Manager. In GTM crea un Custom HTML tag identico al blocco sopra, trigger "Page View" con filtro su URL che contiene /blogs/.

Step 4 — selettori per i temi Shopify più diffusi

Tema Shopify	Selettore blog
Dawn	.article__body
Sense	.article__content
Craft	.article__body
Refresh	.article__body
Prestige	.article__content.rte

Step 5 — check-out e rewriting

Shopify riscrive gli URL nei link esterni se il merchant non è allowlistato. AnchorLabs non passa attraverso il checkout Shopify: i link puntano direttamente al merchant affiliato. Non serve configurazione nel checkout.

Perché AnchorLabs si adatta a CMS diversi

Il valore tecnico di un runtime DOM-based, indipendente dal CMS, è che il costo di onboarding è marginale su ogni nuovo stack. Plugin nativi WordPress come AAWP richiedono un intero modulo server-side. Un componente React custom su un sito Next.js è legato al framework. Un widget Shopify richiede sviluppo di un'app installabile.

AnchorLabs è un tag <script>. La configurazione è un selettore CSS. Il contratto di funzionamento è il DOM del browser — qualcosa che tutti i CMS hanno in comune. Questa è la ragione per cui l'integrazione su Ghost, Drupal, Shopify, SSG statici, framework custom è sempre lo stesso pattern con una variabile che cambia: il selettore.

Il trade-off, che vale la pena essere onesti a menzionare, è che su CMS molto personalizzati (React SPA con Shadow DOM, siti con server-side rendering aggressivo dove il corpo articolo non è visibile fino al primo idratamento completo) la configurazione può richiedere attenzione. In quei casi serve usare rerouteStrategy: "history" e talvolta chiamare anchorLabs.rescan() esplicitamente dopo mutazioni del DOM. Non è un costo significativo, ma va saputo prima di iniziare.

Per una lettura di contesto sull'integrazione in scenari più comuni (WordPress, Next.js) parti dalla guida passo-passo generale. Per l'impatto sulle performance post-integrazione, Affiliate link e Core Web Vitals copre le metriche da misurare.

Troubleshooting cross-CMS

Lo script carica ma nessun tooltip appare Selettore sbagliato. Ispeziona il DOM, correggi.

Tooltip su prima pagina ma non dopo navigazione interna Manca rerouteStrategy: "history" (rilevante per temi Ghost con navigazione SPA, Drupal con BigPipe, Shopify con Hydrogen).

CSP blocca lo script su Ghost(Pro) Contatta il supporto Ghost per aggiungere https://anchor.widgetbay.3labs.it alla allowlist del tuo piano.

Su Drupal gli eventi di click AnchorLabs triggerano il routing del framework Shopify/Ghost/Drupal hanno listener di click globali. AnchorLabs emette click tramite window.location.href su link esterni, non interferisce. Se vedi redirect strani, verifica che nessun plugin di "link interceptor" sia attivo.

Shopify: lo script carica ma il blog è dentro un'app headless In setup headless il template Liquid non gira. Lo snippet va inserito nel frontend Next/Remix/Nuxt — vedi la guida dedicata al framework.

Da dove iniziare

Scegli il CMS su cui sei, segui i 3-5 step della sezione dedicata, verifica in console. Se i tooltip compaiono entro il primo articolo testato, sei a posto. Il secondo step è attivare la raccolta analytics dalla dashboard AnchorLabs (copre tutti i CMS allo stesso modo) e dopo 72 ore iniziare a guardare i dati per articolo.

Se il tuo stack non è nella guida (Joomla, Kirby, Craft CMS, Sanity con frontend custom), il pattern è sempre lo stesso: trova il selettore del corpo articolo, inserisci lo snippet prima di </body>, verifica. Il supporto AnchorLabs copre anche stack non-standard per la configurazione del selettore e del rerouteStrategy.