Déclencheurs personnalisés de la vitrine

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 le reste de ce qui se passe sur votre boutique : 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 utilisable dans Shopify Flow.

L'exemple le plus parlant est celui du tiroir du panier. L'événement « cart view » d'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 glisser un tiroir pour l'ouvrir. Shopify ne renvoie aucune information, ce qui fait qu'aucune application ne peut le détecter. Publier votre propre événement lorsque le tiroir s'ouvre permet de combler cette lacune.

Autres utilisations que les magasins en font :

• Un ajout à la liste de souhaits ou un clic sur « M'avertir », deux actions dont Shopify ne rend compte ni l'une ni l'autre.
• Un guide des tailles ou une politique de retour consultés, comme indication concernant un produit.
• Une modification mineure apportée au sélecteur, qui ne constitue pas une nouvelle vue de la 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 ça marche ?

1. 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 vitrine, il nécessite l'accès au comportement de la vitrine, qui s'accorde une seule fois depuis la page « Autorisations ».
2. Copiez l'extrait d'une ligne que l'application vous affiche et collez-le dans votre thème, à l'endroit où cela se produit. Si vous ne savez pas exactement quoi coller ni où, le site Générer du code de déclenchement à l'aide de l'IA génère l'extrait adapté à votre thème à partir d'une description en langage clair.
3. Écrivez une transformation si vous souhaitez filtrer ou modifier le contenu envoyé, ou laissez ce champ vide pour tout transférer tel quel.
4. Activez-la, puis ajoutez un « Déclencheur de vitrine personnalisée » dans Flow et créez une branche en fonction du nom de l'événement.

Cet extrait correspond à l'intégralité de l'intégration côté 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 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 récupérées dans Flow sous la forme de l'output du déclencheur. Si cela vous suffit, vous avez terminé.

Si vous souhaitez déclencher l'événement uniquement dans certains cas, ou envoyer des champs différents de ceux publiés par le thème, créez une transformation (le même module JavaScript que celui utilisé par Déclencheurs personnalisés). Renvoyez un objet pour déclencher l'événement, ou « 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 Flow sous le même nom : « Custom Storefront Trigger ». Ajoutez-le à un workflow, puis ajoutez une condition stipulant que « eventName » doit correspondre au nom que vous avez choisi.

C'est ce qui permet à un seul déclencheur Flow de déclencher tous les événements de votre boutique en ligne. Le déclencheur contient également le nom que vous lui avez attribué dans l'application, ainsi que le résultat de votre transformation.

Il s'agit d'une fonctionnalité délibérément distincte du « Custom Trigger », qui prend en charge les événements «Déclencheurs personnalisés » basés sur les webhooks. Il existe une différence importante entre les deux qu'il convient de connaître : un déclencheur personnalisé via webhook s'exécute sur nos serveurs et est fiable, tandis qu'un événement « Storefront Event » dépend de la connexion du navigateur de l'acheteur à nos serveurs et de son consentement à l'utilisation des données analytiques.

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 du produit et de la variante, les quantités, les prix, ainsi que la description de l'événement. L'identifiant du client connecté est ajouté automatiquement lorsqu'il existe, 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 Flow ; il n'y a donc aucun intérêt à les inclure dans un événement de la vitrine, d'autant plus que cela transformerait un événement d'analyse en événement contenant des données à caractère personnel.

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éclenchement à 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.