Shopify schaft script tags af: apps verliezen ze op 1 oktober, storefronts op 1 maart

Op 1 maart 2027 laadt een storefront en de livechatbubbel is er niet. De pop-up die e-mailadressen verzamelde is weg. De maattabel op de productpagina ontbreekt. Nergens in de admin staat waarom.

De oorzaak is een changelogbericht van 24 augustus, gericht aan developers. Shopify schaft storefront script tags af en heeft harde deadlines vastgelegd.

Twee data, en welke voor jou geldt

Een script tag is een manier voor een app om zijn JavaScript op elke storefrontpagina te laden zonder aan de themacode te komen. Shopify bracht de vervanging in 2021 uit als theme app extensions met app embed blocks, en heeft nu definitieve data vastgesteld.

Deze uitfasering geldt alleen voor de storefront. Script tags hebben nooit in de checkout gedraaid.

De scriptTags query en de scriptTagDelete mutation blijven na 1 oktober werken. Audits en opruimworkflows blijven gewoon functioneren.

Wat er kapotgaat, en de schakelaar die alleen de merchant kan omzetten

De appcategorieën die van oudsher script tags gebruikten: livechat, pop-ups en e-mailcapture, reviewsterren en trustbadges, valutawisselaars, sessieopnames en heatmaps, en oudere trackingpixels. Veel van deze apps zijn jaren geleden geïnstalleerd en vergeten. Shopify heeft geen lijst van getroffen apps gepubliceerd. Het bedrijf geeft ook geen aantal merchants dat ze gebruikt.

De valkuil zit in hoe de vervanging werkt. De vervanging voor zichtbare functies is een app embed block binnen een theme app extension. App embed blocks staan uit totdat de merchant ze inschakelt in de theme editor. De app kan ze niet namens de merchant activeren.

Ze worden per thema ingeschakeld, dus het publiceren van een nieuw thema zet de embed weer uit. Een Black Friday-thema publiceren is een veelvoorkomend voorbeeld. Gevolg: de developer rolt een update uit, stuurt een e-mail, en totdat iemand in de winkel Online Store opent, naar Themes gaat, op Customize klikt, App embeds selecteert en de schakelaar omzet, draait de functie óf nog op de oude script tag óf helemaal niet. De merchant moet deze stap herhalen bij elke themawissel. Na 1 maart stopt het volledig.

Nog een concreet risico komt uit Shopify's eigen documentatie. Zolang een script tag en de bijbehorende embed allebei draaien, laadt het script twee keer. Analytics tellen dubbel en de interface wordt twee keer gerenderd. De volgorde is strikt: rol de embed uit, bevestig dat hij actief is op het gepubliceerde thema, verwijder dan pas de tag. Nooit eerst verwijderen.

De audit van vijf minuten voor merchants

Er bestaat geen adminrapport voor deze migratie. De installatiebanner verschijnt alleen bij installatie, dus bestaande merchants zien niets in hun dashboard. De paginabron laat alles zien.

Open de homepage van de winkel in een desktopbrowser. Bekijk de paginabron met de standaard sneltoetsen (Ctrl+U of Cmd+Option+U). Zoek in de tekst op asyncLoad.

Elke URL daaronder die eindigt op ?shop=jouwwinkel.myshopify.com is één script tag. Het domein verraadt meestal de app. Vergelijk daarna met Online Store, Themes, Customize, App embeds. Een app die op beide plekken staat, zit midden in de migratie.

Een app die wel in de bron staat maar niet bij App embeds, is degene die je moet mailen. De vraag voor die e-mail, letterlijk: "Gebruikt jullie app nog script tags op de storefront, en wanneer komt de app embed-vervanging uit?" Supportteams van actieve apps weten precies wat dit betekent.

Het timingadvies voor merchants is eenvoudig. Controleer in september. Blijf van half oktober tot en met december, tijdens het piekseizoen, van je app-stack af. Zet in januari en februari de embeds aan en verwijder de apps waarvan de leverancier nooit heeft gereageerd.

Eén bijeffect verdient één vermelding. Script tags laden op elke pagina, of ze nodig zijn of niet. Dat dwingt browsers om onnodige code te downloaden. Embeds kunnen worden beperkt tot specifieke templates, bijvoorbeeld de maattabel alleen op productpagina's laden. De opschoning maakt de winkel meestal sneller.

Ben je eigenaar van de app, rol de embed dan uit vóór 1 oktober

Waarom 1 oktober voor app-eigenaren belangrijker is dan 1 maart, komt neer op nieuwe installaties. Daarna kan een verse installatie geen script tag meer aanmaken, dus de app is kapot voor elke nieuwe klant. De winkel toont bij installatie ook een waarschuwingsbanner als je noch een embed noch een web pixel levert.

De migratievolgorde uit Shopify's documentatie is duidelijk. Bouw eerst de theme app extension met een app embed block. Deep-link daarna de merchant naar de theme editor met de embed al geactiveerd. Bevestig vervolgens dat de embed actief is op het gepubliceerde thema. Verwijder tot slot de script tag met scriptTagDelete.

Dit is de auditquery die wij als eerste draaien. Hij geeft de exacte bron-URL's en aanmaakdata terug.

query {
  scriptTags(first: 50) {
    nodes { id src displayScope createdAt }
  }
}

Wij bouwen Shopify-apps en Shop Minis. Ons team leverde een reeks van vier Shop Minis op voor een klant, en twee daarvan haalden de top 5 in hun categorie. We hebben eerder script-tag-apps gemigreerd naar theme app extensions.

Het patroon dat we zien is consistent. Het embed block zelf is een of twee dagen werk. De weken gaan zitten in het opnieuw testen op het echte thema van de merchant, omdat het script uitging van DOM-selectors die het thema niet heeft, en in het achter merchants aan zitten om de schakelaar om te zetten.

Stuurt het script alleen events, kies dan het web-pixelpad, ook als dat betekent dat je een functie laat vallen, want dat pad vraagt niets van de merchant.

Elke lezer heeft één concrete volgende stap. Merchants: doe vandaag de paginabroncheck. App-eigenaren: draai de scriptTags query over al je installaties en tel ze.