Benutzerdefinierte Trigger für die Storefront

Die integrierten Storefront-Trigger decken die Ereignisse ab, die „Shopify“ meldet. Ein benutzerdefinierter Storefront-Trigger deckt alle sonstigen 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-Ausklappleiste. Das „cart view“-Ereignis von Shopify wird auf der Seite /cart ausgelöst, doch die meisten modernen Themes navigieren nie dorthin - stattdessen wird eine Ausklappleiste aufgeklappt. Shopify meldet nichts, sodass keine App dies erkennen kann. Indem Sie Ihr eigenes Ereignis auslösen, wenn die Ausklappleiste geöffnet wird, schließen Sie diese Lücke.

Weitere Verwendungszwecke in Shops:

• 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 Variante 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, beispielsweise 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 Ihnen die App anzeigt, und fügen Sie ihn an der entsprechenden Stelle in Ihr Theme ein. Falls Sie sich nicht sicher sind, was Sie einfügen sollen oder wo genau, erstellt Trigger-Code mit KI generieren anhand einer Beschreibung in einfachem Deutsch den passenden 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 in Shopify Flow den Trigger „Custom Storefront Trigger“ 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 der Veranstaltung dient als Grundlage für die Verzweigung Ihres Shopify Flow-Workflows; wählen Sie daher einen aussagekräftigen Namen und ändern Sie diesen 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 die Form cart_drawer_opened wird.

Der Name unterliegt intern einem Namensraum, sodass es niemals zu einer Namensüberschneidung mit einem Shopify-Ereignis oder einem benutzerdefinierten Webhook-Trigger mit demselben Namen kommen kann.

Filterung und Umformung

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

Wenn Sie ein Ereignis nur in bestimmten Fällen 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 Trigger 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 Shopify 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 „Shopify Flow“-Trigger alle Ihre Storefront-Ereignisse auslösen. Der Trigger enthält zudem den Namen, den Sie ihm in der App gegeben haben, sowie die Ausgabe Ihrer Transformation.

Es unterscheidet sich bewusst vom „benutzerdefinierten Trigger“, der die webhook-basierte Funktion Benutzerdefinierte Trigger unterstützt. Die beiden unterscheiden sich in einem wichtigen Punkt: Ein Webhook-benutzerdefinierter Trigger wird auf unseren Servern ausgeführt und ist zuverlässig, während ein Storefront-Ereignis davon abhängt, dass der Browser eines Kunden uns erreicht und dass dieser seine Einwilligung zur Datenerfassung erteilt hat.

Was Sie nicht senden sollten

Das zweite Argument von publish liegt vollständig in Ihrer Hand, was bedeutet, dass es in Ihrer Verantwortung liegt, keine personenbezogenen Daten darin zu verwenden.

Übermitteln 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.

Bitte senden Sie keine Namen, E-Mail-Adressen, Telefonnummern oder Postanschriften. Ihr Workflow kann all diese Angaben anhand der Kunden-ID in Shopify 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 erstellen.
• Benutzerdefinierte Trigger - dasselbe Konzept für Shopify-Webhook-Ereignisse, jedoch mit serverseitiger Zuverlässigkeit.
• Pläne und Nutzung - Was gilt als Veranstaltung?