Passa al contenuto principale

Testa i temi Shopify con Varify.io

Ultimo aggiornamento il 22 apr 20264 min di lettura
Indice

In breve​

Usa la funzione «Shopify Theme Preview» per eseguire facilmente un A/B test di un nuovo tema Shopify rispetto a quello vecchio con Varify.io. Per farlo, crea un nuovo esperimento e usa il codice JavaScript fornito. Personalizzalo con l'ID del tuo nuovo tema e testa il nuovo tema prima di passare definitivamente al tuo store.

Utilizza i test dei temi solo se vuoi davvero testare un nuovo tema. In generale consigliamo di apportare modifiche con l'editor visuale di Varify o con modifiche JSS e/o CSS. Non garantiamo la funzionalità del codice fornito né le funzionalità di Shopify. Per un test dei temi è assolutamente necessario un QA approfondito.

Perché testare i temi Shopify​

Un nuovo tema Shopify dovrebbe essere testato tramite A/B test prima del passaggio, per assicurarsi che non peggiori le prestazioni dello store. I cambiamenti nel design possono influire sul comportamento dei clienti e su KPI come il tasso di conversione. L'A/B test consente una verifica basata sui dati per capire se il nuovo tema produce risultati migliori o peggiori.

Step 1: Inserisci lo snippet di Varify.io nel file theme.liquid​

💡Nota: consigliamo di integrare lo snippet di Varify tramite il file theme.liquid per testare i temi. Lo Step 1 deve essere eseguito solo se lo snippet di Varify non è ancora installato sul tuo sito.

Copia lo snippet di Varify.io dalla dashboard e incollalo il più in alto possibile nel file theme.liquid del tuo negozio. Per farlo, vai su "Online Store" -> "Themes" nel backend di Shopify e clicca su "edit code"

Shopify „Themes“ con il menu contestuale del tema attuale aperto e la voce „Edit code“ evidenziata Puoi quindi inserire lo snippet di Varify.io come nell'esempio seguente. Ti preghiamo di non modificare nulla nello snippet, anche se Shopify suggerisce delle modifiche - le modifiche causeranno effetti di flickering oppure il test A/B smetterà di funzionare.

Editor di codice Shopify con theme.liquid aperto; lo snippet Varify si trova direttamente sotto il tag di apertura „<head>“ Verifica se l'implementazione è andata a buon fine. Crea un nuovo esperimento su una pagina prodotto del tuo negozio tramite la dashboard di Varify.io come test. Se l'editor si apre, l'implementazione è andata a buon fine.

Dashboard di Varify con l'URL del negozio Shopify inserito accanto al pulsante „Create new Experiment“

Passo 2: Trova l'ID del tema del nuovo tema che vuoi testare​

Abbiamo bisogno dell'ID del tema per indicare a Shopify quale tema devono vedere i partecipanti al test. Ecco una guida passo-passo su come trovare l'ID del tema dal link di anteprima:

  1. vai a: Sales Channels > Online Store > Themes > Theme Library.

  2. cerca il tema che vuoi testare.

  3. clicca sui tre puntini (Actions)

  4. Clicca su „Preview“ e copia il link.

Il tuo link di anteprima avrà un aspetto simile a questo: https://deinshop.myshopify.com/?preview_theme_id=1234567890

Il numero alla fine del link (1234567890) è il theme ID di cui hai bisogno.

Ora fai lo stesso per il tuo tema attuale e copia anche qui il theme ID.

Passo 3: Crea l'esperimento​

Crea un nuovo esperimento. Inserisci semplicemente la homepage del tuo negozio come URL dell'editor nella dashboard di Varify. Poi clicca su «Add JS» e aggiungi il seguente JavaScript all'esperimento.

Finestra di dialogo dell'editor Varify «Add JS» con lo script che cambia il tema; la riga «preview_theme_id» prende l'ID del nuovo tema

💡Nota: inserisci l'ID del tema attualmente utilizzato nella riga 6 e l'ID del tema da testare nella riga 17.

// Add the experimentId and variationId of your Experiment in order to track your Experiment correctly
const experimentId = 21952;
const variationId = 32490;
// Add your original theme id here
window.varify.helpers.waitFor(
  '[data-theme-instance-id="148175061290"]',
  (themeElement) => {
    // …then run your redirect logic.
    (function () {
      const url = new URL(window.location.href);
      const params = url.searchParams;
      const shadow = document.querySelector('div#varify-shadow-root');

      // only redirect when the variation-param is missing AND the shadow-root isn't present
      if (!params.has('pb') && !shadow) {
      // Add your preview theme id here
        params.set('preview_theme_id', '177143382392');
        params.set('pb', '0');   // hide the preview bar
        const paramAsBase64 = window
          .btoa(`${experimentId}:${variationId}`)
          .replace(/=/g, '');
        params.append(
          'va-red',
          paramAsBase64,
        );
        // replace so you don't add a new history entry
        window.location.replace(url.toString());
      } else {
        console.log('Redirect skipped:', {
          hasVarifyVariation: params.has('varify-variation-id'),
          varifyShadowRootExists: !!shadow
        });
      }
    })();
  }
);

Una volta aggiornato lo snippet di codice con i nuovi ID dei temi, clicca su «Finished» e assegna all'esperimento un nome adeguato. Poi apri «Page Targeting» nell'esperimento e cambia il «Match Type» da «Simple Match» a «Contains.» Poi clicca su «Save Page Targeting.».

Targeting delle pagine del «Shopify Theme Test»: la condizione URL «Contains» corrisponde al dominio del negozio

Una volta che tu o un visitatore avete visto la versione di test, continuerete a vedere la versione di anteprima anche dopo che l'esperimento è stato completato. In modo che tu possa vedere di nuovo il tema originale anche nella variante originale, crea una nuova variante con il nome "New Original". Poi clicca su "Add JS" nel Visual Editor e inserisci il seguente codice JavaScript, sostituendo data-theme-instance-id con l'ID del tema di anteprima del tema Shopify che vuoi testare.

Esecuzione di «Shopify Theme Test» con tre righe: Original allo 0% del traffico, «Variation 1» e «New Original» al 50% ciascuna 
// Add your correct preview theme ID here
window.varify.helpers.waitFor(
  '[data-theme-instance-id="167804502324"]',
  (themeElement) => {
    let currentUrl = window.location.href;

    if (!currentUrl.includes('varify-variation-id')) {
        if (currentUrl.includes('?')) {
            currentUrl += '&exitPreview=1';
        } else {
            currentUrl += '?exitPreview=1';
        }

        window.location.href = currentUrl;
    }
  }
);

Passo 4: Targeting e controllo qualità​

Una volta implementato il JavaScript e salvato l'esperimento, puoi salvare l'URL del tuo store nel page targeting dell'esperimento. Puoi anche usare i link "Preview" per verificare se il redirect funziona e se tutte le impostazioni sono state effettuate correttamente. Per farlo, cerca semplicemente l'ID del tema corrispondente nel codice dello store. Nella versione di test dovrebbe trovarsi l'ID del tema originale oppure l'ID del tema di preview.

Passo 5: Avvia l'esperimento​

Ora avvia l'esperimento con "Start Experiment". Da questo momento, il 50% dei tuoi visitatori sarà indirizzato al nuovo tema e il 50% continuerà a vedere il vecchio tema. I visitatori rimangono sempre assegnati alla stessa variante per tutta la durata dell'esperimento. Ciò significa che il tema che hanno visto una volta, lo vedranno di nuovo durante l'esperimento. Dopo un po' di tempo, riconoscerai quale tema ottiene prestazioni migliori.

Passo 6: Ripristino della modalità anteprima dopo la fine dell'esperimento​

Una volta che i tuoi utenti hanno visto la variante del tema in anteprima, continueranno a vederla anche dopo la fine dell'esperimento. Puoi avviare un esperimento "Clean Up" in modo che gli utenti possano vedere di nuovo il tuo tema originale. Crea semplicemente un nuovo esperimento e inserisci il codice JavaScript della variante "New Original" (vedi sopra) sotto "Add JS". Salva l'esperimento con un nome a tua scelta. Imposta l'allocazione del traffico al 100% per la variante e avvia l'esperimento.

La modalità anteprima è ora terminata per tutti i precedenti partecipanti al test che hanno visto la variante. Verifica la funzionalità del codice prima di avviare l'esperimento, come nei passaggi precedenti.

Su questa pagina