Aangepaste triggers voor de winkelpagina

De ingebouwde storefront-triggers hebben betrekking op de gebeurtenissen die Shopify rapporteert. Een aangepaste storefront-trigger dekt al het overige dat er in je storefront gebeurt: je publiceert een gebeurtenis vanuit je thema met één regel JavaScript, en deze wordt een trigger die je kunt gebruiken in Shopify Flow.

Het duidelijkste voorbeeld is de winkelwagenlade. De ‘cart view’-gebeurtenis van Shopify wordt geactiveerd op de pagina /cart, maar de meeste moderne thema’s navigeren daar nooit naartoe - in plaats daarvan schuiven ze een lade open. Shopify rapporteert niets, dus geen enkele app kan dit waarnemen. Door je eigen gebeurtenis te publiceren wanneer de lade opengaat, vul je die leemte op.

Andere doeleinden waarvoor winkels het gebruiken:

• Een toevoeging aan de verlanglijst of een klik op ‘Houd mij op de hoogte’ - geen van beide wordt door Shopify geregistreerd.
• Een maattabel of het retourbeleid dat is geopend, als aanwijzing over een product.
• Een wijziging in de picker, die geen nieuwe paginaweergave is (zie Triggers voor de winkelpagina).
• Alles wat je thema of een app van een derde partij al weet, maar Shopify niet.

Hoe het werkt

1. Maak de trigger aan in de app en geef deze een gebeurtenisnaam, bijvoorbeeld cart_drawer_opened. Net als elke andere storefront-trigger heeft deze ‘Storefront Behaviour Access’ nodig, een toestemming die eenmalig wordt verleend op de pagina ‘Permissions’.
2. Kopieer het fragment van één regel dat de app je laat zien en plak het in je thema op de plek waar dat gebeurt. Als je niet zeker weet wat je moet plakken of waar, dan schrijft Triggercode genereren met AI het fragment voor je thema op basis van een beschrijving in gewoon Engels.
3. Schrijf een transformatie als je de verzonden gegevens wilt filteren of aanpassen, of laat het veld leeg om alles door te sturen.
4. Schakel deze in, voeg vervolgens ‘Custom Storefront Trigger’ toe aan de Flow en maak een vertakking op basis van de naam van de gebeurtenis.

Dit fragment bevat de volledige integratie aan de kant van het thema:

Shopify.analytics.publish("cart_drawer_opened", {
  // anything you want the Flow to receive
  itemCount: 3,
  total: "129.90"
});

Een naam voor het evenement bedenken

De naam van het evenement bepaalt waar je Flow-workflow zich vertakt, dus kies iets dat duidelijk is en laat het daarna met rust zodra workflows het gebruiken.

Namen mogen letters, cijfers, onderstrepingstekens en koppeltekens bevatten, moeten beginnen met een letter of een cijfer en mogen maximaal 64 tekens lang zijn. De app zet wat je intypt om in een ‘slug’, dus Cart drawer opened wordt cart_drawer_opened.

De naam wordt intern in een naamruimte geplaatst, zodat er nooit een conflict kan ontstaan met een Shopify-gebeurtenis of met een aangepaste webhook-trigger met dezelfde naam.

Filteren en hervormen

De gegevens die je als tweede argument doorgeeft, komen in Flow binnen als de output van de trigger. Als dat alles is wat je nodig hebt, ben je klaar.

Als je alleen in bepaalde gevallen een gebeurtenis wilt activeren, of andere velden wilt verzenden dan het gepubliceerde thema, schrijf dan een transformatie - dezelfde JavaScript-module die door Aangepaste triggers wordt gebruikt. Retourneer een object om de gebeurtenis te activeren, en retourneer null om deze over te slaan:

export async function transform(payload, topic, shop, ctx) {
  // Anything you published is on `payload`.
  if ((payload.itemCount || 0) < 2) return null;

  return {
    itemCount: payload.itemCount,
    total: payload.total,
    // Present only when the shopper is signed in.
    customerId: payload.customerId,
  };
}

Het gebruiken in Shopify Flow

Elke ‘Custom Storefront Trigger’ wordt in Flow weergegeven als dezelfde trigger: ‘Custom Storefront Trigger’. Voeg deze toe aan een workflow en voeg vervolgens een voorwaarde toe waarbij eventName gelijk is aan de door jou gekozen naam.

Daardoor kan één Flow-trigger al je storefront-gebeurtenissen activeren. De trigger bevat ook de naam die je hem in de app hebt gegeven, en de uitvoer van je transformatie.

Het staat bewust los van ‘Custom Trigger’, dat de op webhooks gebaseerde Aangepaste triggers ondersteunt. Er is een belangrijk verschil tussen beide dat de moeite waard is om te weten: een op webhooks gebaseerde ‘Custom Trigger’ draait op onze servers en is betrouwbaar, terwijl een ‘Storefront Event’ afhankelijk is van het feit of de browser van een klant ons bereikt en of de klant toestemming heeft gegeven voor het gebruik van analytics.

Wat je niet moet versturen

Het tweede argument van publish valt volledig onder jouw bevoegdheid, wat betekent dat het jouw verantwoordelijkheid is om ervoor te zorgen dat er geen persoonsgegevens in terechtkomen.

Stuur identificatiegegevens en feiten mee: product- en variant-ID’s, hoeveelheden, prijzen en de naam van de gebeurtenis. De ID van de ingelogde klant wordt automatisch toegevoegd als die beschikbaar is, dus je hoeft deze nooit zelf mee te sturen.

Stuur geen namen, e-mailadressen, telefoonnummers of postadressen mee. Je workflow kan al deze gegevens opzoeken aan de hand van het klant-ID in Flow, dus het heeft geen zin om ze in een storefront-gebeurtenis op te nemen. Bovendien verandert een analytische gebeurtenis hierdoor in een gebeurtenis met persoonsgegevens.

Volgende stappen

• Triggers voor de winkelpagina - de ingebouwde triggers voor de webshop en hoe de pixel werkt.
• Triggercode genereren met AI - laat de AI het themafragment of de transformatie voor je schrijven.
• Aangepaste triggers - hetzelfde principe voor webhook-gebeurtenissen van het type Shopify, maar dan met betrouwbaarheid aan de serverzijde.
• Plannen en gebruik - wat als een evenement wordt beschouwd.