Guida alla Migrazione della Thank You e Order Status Page: Perché, Quando e Come Farlo al Meglio

Confermare se è necessaria la migrazione

Shopify fornisce un report generato dall'AI che analizza le personalizzazioni esistenti, le classifica in categorie e offre suggerimenti su come aggiornarle. Questa guida personalizzata aiuta a identificare le modifiche presenti nelle pagine di Conferma Ordine e Stato Ordine, fornendo istruzioni dettagliate per ricrearle nel nuovo sistema.

Come accedere alla guida:

1. Dall'admin di Shopify, vai su Impostazioni > Checkout.

2. Nella sezione Configurazioni clicca su Rivedi personalizzazioni.

3. Nella pagina Report delle personalizzazioni otterrai un'analisi degli script aggiuntivi, inclusi i seguenti dati:
   
   
   1. App installate: elenco delle app che offrono già blocchi per la Thank You Page e Order Status Page, oppure app pixel per gestire i tracciamenti specifici. In questo caso, sarà necessario attivarle o configurarle.
      
   2. App incompatibili: elenco delle app attualmente non compatibili con la nuova infrastruttura. Shopify consiglia di contattare il supporto dell’app per maggiori informazioni su eventuali aggiornamenti.
   3. Script aggiuntivi: grazie a un modello AI (LLM), Shopify analizza il codice presente nella sezione Additional Scripts, fornisce una spiegazione del suo funzionamento e suggerisce come migrarlo nel nuovo sistema.

Inoltre, per i merchant Shopify Plus che hanno personalizzazioni come upsell o survey all'interno della Thank You Page e della Order Status Page, c'è bisogno di  migrare queste funzionalità utilizzando le Checkout UI Extensions.

Se la guida all'aggiornamento è vuota, si può procedere direttamente con la sostituzione delle pagine tramite il Checkout Editor. 

Le nostre riflessioni sulla migrazione

Quando abbiamo iniziato a esplorare la personalizzazione della Thank You Page e della Order Status Page su Shopify, gli strumenti e le opzioni disponibili erano ancora molto limitati, dando l’impressione di una funzionalità agli albori. Nel tempo, però, Shopify ha introdotto aggiornamenti significativi, migliorando la flessibilità di queste pagine, soprattutto con l’introduzione dello strumento Pixel Helper.

Il Pixel Helper è stato un'aggiunta fondamentale, perché permette agli sviluppatori di visualizzare i dati disponibili per ogni evento, semplificando il debug e garantendo l’attivazione corretta dei pixel di marketing. Questo strumento ha sicuramente reso la migrazione più intuitiva, ma resta ancora molto lavoro da fare per assicurarsi che tutti i pixel personalizzati vengano migrati correttamente e che i dati degli eventi necessari siano tracciati in modo completo e preciso.

Sempre all'interno dei Custom Pixel, è stata nel tempo anche aggiunta la selezione dei permessi relativi alla customer privacy, che permettono di gestire con granularità che tipo di dati possono essere raccolti in base alle preferenze dell'utente.

Tracciamenti: esempi di approcci alla migrazione

Gran parte delle personalizzazioni che ho migrato riguardano i tracciamenti implementati tramite script aggiuntivi. Di seguito, alcuni esempi su come gestire questa migrazione per garantire che pixel e sistemi di tracciamento continuino a funzionare correttamente.

Shopify consiglia di eseguire la migrazione in un periodo di basso traffico, per ridurre al minimo il rischio di duplicazione o perdita di dati durante la transizione.

Migrazione GTM

Uno degli esempi più completi di migrazione che ci ha fornito Shopify è quello di Google Tag Manager (GTM) - qui la documentazione completa. 

Shopify genera eventi ogni volta che un utente interagisce con le pagine dello store, ad esempio visualizzando un prodotto, navigando su una pagina o aggiungendo un articolo al carrello. Sfruttando questi eventi nativi, è possibile inviare i dati necessari al dataLayer di GTM. Tuttavia, poiché i dati disponibili dipendono esclusivamente da ciò che Shopify espone, ci sono alcune limitazioni.

Ad esempio, non è più possibile recuperare informazioni specifiche del cliente, come il numero di ordini effettuati in passato. Questo richiede un'attenta valutazione su come ottenere questi dati o, più a monte, se siano effettivamente indispensabili per le analisi e il tracciamento.

Migrazione di altri script

Sempre nella guida alla migrazione di Shopify, viene presentato passo passo il processo di migrazione di script come quelli di Google Analytics. La maggior parte di questi tracciamenti comincia con uno <script> tag che chiama uno script esterno all'interno della pagina thank you. Con i custom pixel non è più possibile inserire HTML all'interno della thank you page, quindi lo script dovrà essere inserito tramite JavaScript. Come spiegato da Shopify:

<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>

diventerà

const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');
script.setAttribute('async', '');
document.head.appendChild(script);

Poi all'interno di questo Pixel, passeremo i dati resi disponibili dagli eventi Shopify nel formato richiesto dal sistema di tracciamento.

Eccezioni: come aggiungere dati non disponibili di default

Come accennato in precedenza, i dati che possiamo trasmettere ai nostri tracciamenti dipendono da ciò che Shopify mette a disposizione. In alcuni casi, però, è possibile recuperare informazioni aggiuntive con strategie alternative.

Un esempio efficace è offerto da Clerk.io, che utilizza il local storage per trasferire dati sui prodotti visualizzati dall'utente prima di completare il checkout. Il local storage consente di memorizzare queste informazioni direttamente nel browser, evitando la necessità di ricaricarle da database esterni o di effettuare chiamate API aggiuntive. Questo lo rende una soluzione efficiente per gestire dati che Shopify non fornisce direttamente.

Nel dettaglio, il codice del tema emette un evento custom, che viene poi "ascoltato" all'interno di un custom pixel. Potete trovare la documentazione relativa a questo tipo di Pixel nella loro guida all'installazione su Shopify.

Conclusione

La migrazione delle pagine di Conferma Ordine e Stato Ordine rappresenta un cambiamento significativo per i commercianti Shopify, ma anche un'opportunità per modernizzare e ottimizzare le personalizzazioni esistenti. Affrontare questo processo con anticipo permetterà di evitare interruzioni nel tracciamento degli ordini, nei pixel di marketing e nelle personalizzazioni del checkout.

L’adozione di soluzioni come Google Tag Manager, local storage e app blocks consentirà di mantenere un alto livello di funzionalità, rispettando al contempo le nuove linee guida di Shopify.

Per gli sviluppatori, questa transizione rappresenta un’occasione per rafforzare l’efficienza delle soluzioni di tracciamento e migliorare l’integrazione con gli strumenti di analisi. Rimanere aggiornati sulle best practice di Shopify e testare accuratamente ogni modifica garantirà un passaggio fluido e senza intoppi, assicurando che il negozio continui a offrire un’esperienza utente ottimale.