Déclencheurs personnalisés de la boutique en ligne
Publiez un événement du thème (panier, liste de souhaits) en une ligne de JavaScript pour créer un déclencheur Shopify Flow.
Les déclencheurs intégrés à la boutique en ligne couvrent les événements signalés par Shopify. Un déclencheur personnalisé de boutique en ligne couvre tout ce qui se passe d’autre sur votre boutique en ligne : il vous suffit de publier un événement depuis votre thème à l’aide d’une seule ligne de code JavaScript pour qu’il devienne un déclencheur que vous pouvez utiliser dans Shopify Flow.
L'exemple le plus parlant est celui du menu déroulant du panier. L'événement « view » du panier, défini par Shopify, se déclenche sur la page /cart, mais la plupart des thèmes modernes ne redirigent jamais vers cette page : ils font plutôt apparaître un menu déroulant par glissement. Shopify ne signale rien, si bien qu'aucune application ne peut le détecter. La publication de votre propre événement lors de l'ouverture du menu déroulant comble cette lacune.
Autres utilisations que les boutiques en font :
- L'ajout à une liste de souhaits ou la sélection de l'option « M'avertir », deux actions dont Shopify ne rend pas compte.
- La consultation d'un guide des tailles ou d'une politique de retour, en tant qu'indication concernant un produit.
- Une variante apportée au sélecteur, qui ne constitue pas une nouvelle page (voir Déclencheurs de Storefront).
- Tout ce que votre thème ou une application tierce connaît déjà et que Shopify ignore.
Comment cela fonctionne-t-il ?
- Créez le déclencheur dans l'application et attribuez-lui un nom d'événement, par exemple
cart_drawer_opened. Comme tout déclencheur de boutique en ligne, il nécessite l'accès au comportement de la boutique en ligne, qui s'accorde une seule fois sur la page « Autorisations ». - Copiez l'extrait d'une ligne que l'application vous indique et collez-le dans votre thème, à l'endroit où ce problème se produit. Si vous ne savez pas exactement quoi coller ni où, le site Générer du code de déclencheur à l'aide de l'IA génère l'extrait adapté à votre thème à partir d'une description rédigée en langage courant.
- Écrivez une transformation si vous souhaitez filtrer ou modifier le contenu envoyé, ou laissez ce champ vide pour tout transférer tel quel.
- Activez-la, puis ajoutez un déclencheur « Custom Storefront » dans Shopify Flow et créez une branche en fonction du nom de l'événement.
Cet extrait de code correspond à l'intégralité de l'intégration du côté du thème :
Shopify.analytics.publish("cart_drawer_opened", {
// anything you want the Flow to receive
itemCount: 3,
total: "129.90"
});Choix du nom de l'événement
Le nom de l'événement sert de critère de branchement pour votre workflow Shopify Flow ; choisissez donc un nom clair et ne le modifiez plus une fois que les workflows l'utilisent.
Les noms peuvent contenir des lettres, des chiffres, des traits de soulignement et des tirets ; ils doivent commencer par une lettre ou un chiffre et peuvent comporter jusqu'à 64 caractères. L'application génère un « slug » à partir de ce que vous saisissez : ainsi, Cart drawer opened devient cart_drawer_opened.
Ce nom est associé à un espace de noms en interne ; il ne peut donc jamais entrer en conflit avec un événement Shopify ni avec un déclencheur personnalisé de webhook portant le même nom.
Filtrage et remodelage
Les données que vous transmettez en tant que deuxième argument sont reçues dans Shopify Flow sous la forme de l'output du déclencheur. Si cela vous suffit, vous avez terminé.
Lorsque vous souhaitez déclencher une action uniquement dans certains cas, ou envoyer des champs différents de ceux publiés par le thème, écrivez une transformation - le même module JavaScript que celui utilisé par Déclencheurs personnalisés. Renvoyez un objet pour déclencher l'action, renvoyez null pour l'ignorer :
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,
};
}Utilisation dans Shopify Flow
Chaque déclencheur « Custom Storefront Trigger » apparaît dans Shopify Flow sous la même appellation : « Custom Storefront Trigger ». Ajoutez-le à un Workflow, puis définissez une condition selon laquelle « eventName » doit correspondre au nom que vous avez choisi.
C'est ce qui permet à un seul déclencheur Shopify Flow de déclencher tous les événements de votre boutique en ligne. Le déclencheur comporte également le nom que vous lui avez attribué dans l'application, ainsi que la sortie de votre transformation.
Il s'agit d'une fonctionnalité délibérément distincte du «** Déclencheur personnalisé **», qui prend en charge l'Déclencheurs personnalisés basée sur les webhooks. Ces deux éléments présentent une différence qu'il est utile de connaître : un déclencheur personnalisé via webhook s'exécute sur nos serveurs et est fiable, tandis qu'un événement « de la boutique en ligne » dépend de la connexion du navigateur de l'acheteur à nos serveurs et de son consentement à l'utilisation des données d'analyse.
Ce qu'il ne faut pas envoyer
Le deuxième argument de la fonction publish relève entièrement de votre contrôle, ce qui signifie qu'il vous incombe de veiller à ce qu'il ne contienne aucune donnée à caractère personnel.
Envoyez les identifiants et les informations suivantes : les identifiants des produits et des variantes, les quantités, les prix, ainsi que la description de l'événement. L'identifiant du client connecté est ajouté automatiquement dès qu'il est disponible ; vous n'avez donc jamais besoin de le transmettre vous-même.
N'envoyez pas de noms, d'adresses e-mail, de numéros de téléphone ni d'adresses postales. Votre workflow peut récupérer toutes ces informations à partir de l'identifiant client dans Shopify Flow ; il n'y a donc aucun intérêt à les inclure dans un événement de la boutique en ligne, et cela transformerait un événement d'analyse en un événement contenant des données à caractère personnel.
Est-ce que cela utilise le forfait de mon abonnement ?
Oui. Chaque événement qui nous parvient est pris en compte, y compris ceux que votre transformateur ignore en renvoyant la valeur null - la règle est la même que celle décrite à l'adresse Déclencheurs personnalisés. Les événements ignorés par le navigateur en raison d'un consentement manquant ne nous parviennent jamais et ne sont jamais pris en compte.
Comme c'est vous qui décidez où placer l'extrait de code, vous contrôlez directement le volume. Un événement « ouverture de tiroir » se produit bien moins souvent qu'une consultation de produit.
Puis-je publier le même événement à partir de plusieurs endroits ?
Oui. C'est le nom qui importe, et non l'endroit d'où provient la publication. Il est judicieux d'inclure dans la Payload une information indiquant la provenance de la publication si vous souhaitez que le workflow puisse les distinguer.
L'ouverture de deux tiroirs compte-t-elle pour un seul événement ?
Non. Les événements délibérés sont traités séparément, car une publication en double signifie généralement que l'événement s'est réellement produit deux fois. Cela diffère des déclencheurs intégrés, qui regroupent les répétitions d'une même consultation de page.
Puis-je modifier le nom de l'événement ultérieurement ?
C'est possible, mais votre workflow Shopify Flow applique un filtre sur ce nom ; par conséquent, si vous modifiez ce nom, le workflow cessera de s'exécuter jusqu'à ce que vous mettiez à jour la condition - et vous devrez également mettre à jour l'extrait de code dans votre thème pour qu'il corresponde. Considérez ce nom comme fixe dès lors qu'un workflow l'utilise.
Est-ce que cela fonctionne sur les pages de paiement ?
La publication à partir du code de votre propre thème s'applique à la page d'accueil de votre boutique en ligne. La page de paiement est générée par Shopify et vous ne pouvez pas y ajouter de code de thème ; veuillez donc utiliser à la place les déclencheurs intégrés « Erreur de paiement affichée » et « Code de réduction de paiement rejeté ».
Prochaines étapes
- Déclencheurs de Storefront - les déclencheurs intégrés à la boutique en ligne et le fonctionnement du pixel.
- Générer du code de déclencheur à l'aide de l'IA - Laissez l'IA rédiger à votre place l'extrait de thème ou la transformation.
- Déclencheurs personnalisés - le même principe s'applique aux événements de webhook Shopify, avec une fiabilité côté serveur.
- Forfaits et utilisation - ce qui est considéré comme un événement.
Comment puis-je le tester avant sa mise en ligne sur ma boutique en ligne ?
La page dédiée au déclencheur dans l'application propose un test qui exécute votre transformation et lance votre workflow Shopify Flow, ce qui vous permet d'observer son exécution de bout en bout sans modifier votre thème. Ce test n'utilise pas votre quota.
Une fois l'extrait intégré à votre thème, la page « Historique des événements » affiche les événements en temps réel, au fur et à mesure qu'ils se produisent.