Benutzerdefinierte Storefront-Auslöser

Die integrierten Storefront-Trigger decken die Ereignisse ab, die „Shopify“ meldet. Ein benutzerdefinierter Storefront-Trigger deckt alle anderen Vorgänge in Ihrer Storefront ab: Sie veröffentlichen ein Ereignis aus Ihrem Theme mit einer einzigen Zeile JavaScript, und es wird zu einem Trigger, den Sie in Shopify Flow verwenden können.

Das deutlichste Beispiel ist die Warenkorb-Ausziehleiste. Das „cart view“-Ereignis von Shopify wird auf der Seite /cart ausgelöst, doch die meisten modernen Themes navigieren gar nicht dorthin - stattdessen wird eine Ausziehleiste aufgeklappt. Shopify meldet nichts, sodass keine App dies erkennen kann. Durch das Veröffentlichen eines eigenen Ereignisses beim Öffnen der Ausziehleiste lässt sich diese Lücke schließen.

Weitere Verwendungszwecke in Geschäften:

• Ein Eintrag in die Wunschliste oder ein Klick auf „Benachrichtigen“ - beides wird von Shopify nicht gemeldet.
• Eine Größentabelle oder die Rückgabebedingungen wurden aufgerufen, um Informationen zu einem Produkt zu erhalten.
• Eine Änderung am Picker, bei der es sich nicht um eine neue Seitenansicht handelt (siehe Storefront-Auslöser).
• Alles, was Ihr Theme oder eine Drittanbieter-App bereits weiß, Shopify jedoch nicht.

So funktioniert es

1. Erstellen Sie den Trigger in der App und vergeben Sie einen Ereignisnamen, zum Beispiel cart_drawer_opened. Wie jeder Storefront-Trigger benötigt er die Berechtigung „Storefront-Verhalten - Zugriff“, die einmalig auf der Seite „Berechtigungen“ erteilt wird.
2. Kopieren Sie den einzeiligen Codeausschnitt, den die App Ihnen anzeigt, und fügen Sie ihn an der entsprechenden Stelle in Ihr Theme ein. Wenn Sie sich nicht sicher sind, was Sie einfügen sollen oder wo, erstellt Trigger-Code mit KI generieren anhand einer Beschreibung in einfachem Englisch den Codeausschnitt für Ihr Theme.
3. Geben Sie eine Transformation ein, wenn Sie die gesendeten Daten filtern oder umgestalten möchten, oder lassen Sie das Feld leer, um alles weiterzuleiten.
4. Schalten Sie die Funktion ein, fügen Sie anschließend im Flow den Auslöser „Benutzerdefinierter Storefront-Auslöser“ hinzu und verzweigen Sie anhand des Ereignisnamens.

Der Codeausschnitt umfasst die gesamte Integration auf der Theme-Seite:

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

Benennung der Veranstaltung

Der Name des Events ist ausschlaggebend dafür, wo sich Ihr Flow-Workflow verzweigt. Wählen Sie daher einen aussagekräftigen Namen und ändern Sie ihn nicht mehr, sobald Workflows ihn verwenden.

Namen dürfen Buchstaben, Zahlen, Unterstriche und Bindestriche enthalten, müssen mit einem Buchstaben oder einer Zahl beginnen und dürfen bis zu 64 Zeichen lang sein. Die App wandelt Ihre Eingabe in einen Slug um, sodass aus Cart drawer opened cart_drawer_opened wird.

Der Name wird intern einem Namensraum zugeordnet, sodass es niemals zu einer Kollision mit einem Shopify-Ereignis oder einem benutzerdefinierten Webhook-Trigger mit demselben Namen kommen kann.

Filtern und Umformen

Die Daten, die Sie als zweites Argument übergeben, werden in Flow als output des Triggers übernommen. Wenn das alles ist, was Sie benötigen, sind Sie fertig.

Wenn Sie nur in bestimmten Fällen ein Ereignis auslösen oder andere Felder als die vom Theme veröffentlichten senden möchten, erstellen Sie eine Transformation - dasselbe JavaScript-Modul, das auch von Benutzerdefinierte Auslöser verwendet wird. Geben Sie ein Objekt zurück, um das Ereignis auszulösen, oder null, um es zu überspringen:

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,
  };
}

Verwendung in Shopify Flow

Jeder benutzerdefinierte Storefront-Trigger wird in Flow als derselbe Trigger angezeigt: „Benutzerdefinierter Storefront-Trigger“. Fügen Sie ihn einem Workflow hinzu und legen Sie anschließend eine Bedingung fest, wonach „eventName“ dem von Ihnen gewählten Namen entsprechen muss.

Auf diese Weise kann ein einzelner Flow-Trigger alle Ihre Storefront-Ereignisse auslösen. Der Trigger enthält außerdem den Namen, den Sie ihm in der App gegeben haben, sowie die Ausgabe Ihrer Transformation.

Es unterscheidet sich bewusst vom „Custom Trigger“, der das webhook-basierte Benutzerdefinierte Auslöser unterstützt. Die beiden unterscheiden sich in einem Punkt, den man kennen sollte: Ein Webhook-Custom-Trigger läuft auf unseren Servern und ist zuverlässig, während ein Storefront-Ereignis davon abhängt, dass der Browser des Käufers uns erreicht und dieser seine Einwilligung zur Analyse erteilt hat.

Was Sie nicht verschicken sollten

Das zweite Argument von publish unterliegt vollständig Ihrer Kontrolle, was bedeutet, dass es in Ihrer Verantwortung liegt, keine personenbezogenen Daten darin anzugeben.

Senden Sie Identifikatoren und Fakten: Produkt- und Varianten-IDs, Mengen, Preise sowie die Bezeichnung des Vorfalls. Die ID des angemeldeten Kunden wird automatisch hinzugefügt, sofern eine vorhanden ist, sodass Sie diese niemals selbst übermitteln müssen.

Senden Sie keine Namen, E-Mail-Adressen, Telefonnummern oder Postanschriften. Ihr Workflow kann all diese Angaben anhand der Kunden-ID in Flow abrufen. Es bringt also keinen Vorteil, sie in ein Storefront-Ereignis aufzunehmen, und dadurch wird aus einem Analyseereignis ein Ereignis mit personenbezogenen Daten.

Nächste Schritte

• Storefront-Auslöser - die integrierten Storefront-Trigger und die Funktionsweise des Pixels.
• Trigger-Code mit KI generieren - Lassen Sie die KI den Theme-Ausschnitt oder die Transformation für Sie schreiben.
• Benutzerdefinierte Auslöser - Das gleiche Konzept für Shopify-Webhook-Ereignisse, jedoch mit serverseitiger Zuverlässigkeit.
• Pläne und Nutzung - Was gilt als Veranstaltung?