> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify

> Connectez Shopify à OneSignal via l'intégration Vendo pour les notifications push web, les tags clients, les événements commerce et le ciblage comportemental.

OneSignal s'est associé à Vendo pour créer une intégration Shopify transparente. Vendo déploie le SDK OneSignal sur votre boutique Shopify en un clic — aucune modification manuelle du code du thème n'est requise. Il synchronise les tags clients, les événements de navigation côté client et les événements commerciaux côté serveur vers OneSignal pour vous permettre de créer des segments et de déclencher des campagnes push à partir de comportements réels et de l'historique d'achat.

Pour la documentation de Vendo, consultez [Vendo OneSignal Destination](https://docs.vendodata.com/destinations/onesignal/overview).

## Prérequis

Avant de commencer, assurez-vous d'avoir :

* Une boutique Shopify avec l'[application Vendo](https://apps.shopify.com/) installée
* Un compte et une application OneSignal (plateforme Web)
* Votre **App ID** OneSignal (obligatoire)
* Votre **REST API Key** OneSignal (obligatoire pour les événements côté serveur comme la synchronisation des commandes et le balisage des utilisateurs)

## Configuration OneSignal

<Steps>
  <Step title="Créer une application OneSignal">
    Connectez-vous à [onesignal.com](https://onesignal.com) et créez ou sélectionnez une application. Choisissez **Web** comme plateforme et sélectionnez **Custom Code** comme type d'intégration.
  </Step>

  <Step title="Configurer les paramètres push web">
    Dans votre application OneSignal, accédez à **Settings > Push & In-App > Web Settings** ou suivez le guide de [configuration du push web](./web-push-setup).

    **Configuration du site**

    * **Site Name** : Le nom de votre boutique, utilisé comme titre de notification par défaut.
    * **Site URL** : L'URL accessible publiquement de votre boutique Shopify (par ex. `https://yourstore.com`).
      * Doit être l'[origine](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) exacte de votre site.
      * N'utilisez pas `https://your-site.myshopify.com/` si les clients accèdent à votre site via un domaine personnalisé comme `https://your-site.com/`.
    * **Default Icon URL** : Téléchargez une image PNG ou JPG carrée de 256x256px pour les invites et messages de notification. Si non définie, une icône de cloche est utilisée.
  </Step>

  <Step title="Configurer le chemin du service worker">
    Shopify n'autorise pas la diffusion de fichiers depuis la racine du site, vous devez donc indiquer à OneSignal où Vendo sert le fichier service worker.

    Dans OneSignal, accédez à **Settings > Push & In-App > Web Settings**, faites défiler jusqu'à **Advanced Push Settings** et configurez :

    | Paramètre                         | Valeur                  |
    | --------------------------------- | ----------------------- |
    | Service Worker Path               | `/apps/vendo/`          |
    | Service Worker Filename           | `OneSignalSDKWorker.js` |
    | Updater Filename                  | `OneSignalSDKWorker.js` |
    | Service Worker Registration Scope | `/apps/vendo/`          |

    <Frame caption="Configuration du service worker pour les boutiques Shopify utilisant Vendo.">
      <img src="https://mintcdn.com/onesignal/N_-d1DtCTRgGPN4l/images/integrations/shopify/vendo-service-worker-configuration.png?fit=max&auto=format&n=N_-d1DtCTRgGPN4l&q=85&s=b7bc1794445e002bd3427c94a6ec6ccf" alt="OneSignal Advanced Push Settings showing service worker paths configured for Vendo" width="3038" height="1108" data-path="images/integrations/shopify/vendo-service-worker-configuration.png" />
    </Frame>

    Vendo sert automatiquement le fichier `OneSignalSDKWorker.js` requis à `https://yourstore.myshopify.com/apps/vendo/OneSignalSDKWorker.js` — aucun téléchargement manuel de fichier n'est nécessaire.

    <Note>
      L'Updater Filename et le Service Worker Filename sont le même fichier. OneSignal v16+ utilise un seul service worker pour les deux usages.
    </Note>
  </Step>

  <Step title="Copier vos identifiants">
    Dans OneSignal, accédez à [**Settings > Keys & IDs**](./keys-and-ids) et copiez votre **App ID** et votre **REST API Key**. Vous les saisirez dans Vendo.
  </Step>
</Steps>

## Configuration Vendo

<Steps>
  <Step title="Installer l'application Vendo">
    Installez l'application Vendo depuis le Shopify App Store.
  </Step>

  <Step title="Ajouter l'intégration OneSignal">
    Dans Vendo, accédez à **Integrations > Add Integration > OneSignal** (ou **Destinations > OneSignal**).

    <Frame caption="Ajouter l'intégration OneSignal dans Vendo.">
      <img src="https://mintcdn.com/onesignal/PoskQI_qr0DD8jDV/images/integrations/shopify/vendo-onesignal-integrations.png?fit=max&auto=format&n=PoskQI_qr0DD8jDV&q=85&s=13acfaf4e6b01f77535f1a1386c4212d" alt="Vendo Integrations page showing the OneSignal integration option" width="2520" height="1756" data-path="images/integrations/shopify/vendo-onesignal-integrations.png" />
    </Frame>
  </Step>

  <Step title="Saisir vos identifiants OneSignal">
    Saisissez votre **App ID** et votre **REST API Key** OneSignal de la section précédente, puis cliquez sur **Save**.
  </Step>

  <Step title="Activer le bloc de thème Vendo">
    Le bloc de thème Vendo charge le SDK OneSignal sur votre boutique. Sans lui, l'invite push n'apparaîtra pas et le suivi côté client ne fonctionnera pas.

    1. Dans votre administration Shopify, accédez à **Online Store > Themes > Customize**.
    2. Cliquez sur **App embeds** (icône de pièce de puzzle dans la barre latérale gauche).
    3. Activez **Vendo**.
    4. Cliquez sur **Save**.

    Le bloc de thème gère l'initialisation du SDK, l'enregistrement du service worker, l'affichage de l'invite push, l'identification des utilisateurs (abonnement push, connexion, inscription à la newsletter) et la synchronisation des tags.
  </Step>

  <Step title="Sélectionner les événements à synchroniser">
    Dans l'application Vendo sous **OneSignal > Events**, activez les événements côté client et côté serveur que vous souhaitez envoyer à OneSignal. Consultez [Suivi](#tracking) ci-dessous pour la liste complète des événements.
  </Step>

  <Step title="Synchronisation des données historiques (optionnel)">
    Vendo peut remplir rétroactivement les clients existants et l'historique des commandes récentes vers OneSignal. Cela se produit automatiquement en arrière-plan après avoir enregistré vos identifiants.

    <Frame caption="Options de synchronisation des données historiques dans Vendo.">
      <img src="https://mintcdn.com/onesignal/dknFSNQuQfw5IM0j/images/integrations/shopify/vendo-historical-data.png?fit=max&auto=format&n=dknFSNQuQfw5IM0j&q=85&s=4eb61a384a7ac3f4596661348f98ac48" alt="Vendo historical data settings showing sync options for Shopify data" width="1724" height="762" data-path="images/integrations/shopify/vendo-historical-data.png" />
    </Frame>
  </Step>
</Steps>

## Suivi

### Identification des utilisateurs

Vendo utilise une approche **réservée aux utilisateurs identifiés** — les visiteurs anonymes ne sont pas suivis dans OneSignal. Les utilisateurs doivent être identifiés via l'une des quatre méthodes avant que les événements soient envoyés. Cela évite les doublons d'utilisateurs et garantit des données propres et exploitables.

| Méthode                         | Comment ça fonctionne                                                                                                                 | Identifiant utilisé          |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| **Abonnement push web**         | Le visiteur clique sur "Autoriser" dans l'invite push. OneSignal crée automatiquement un utilisateur et Vendo capture l'ID OneSignal. | OneSignal ID                 |
| **Inscription à la newsletter** | Le visiteur soumet un formulaire de newsletter ou d'e-mail. Vendo capture l'e-mail et appelle `OneSignal.login(email)`.               | Email                        |
| **Connexion client**            | Le client se connecte à son compte Shopify. Vendo le détecte et appelle `OneSignal.login()` avec l'identifiant configuré.             | Shopify Customer ID ou Email |
| **Commande complétée**          | Le client finalise un achat. Vendo stocke l'identifiant et appelle `OneSignal.login()`.                                               | Shopify Customer ID ou Email |

<Warning>
  Si vous avez une application mobile ou des connexions tierces, sélectionnez l'identifiant (Shopify Customer ID vs. Email) qui correspond à vos autres outils pour que les profils utilisateurs restent cohérents entre les plateformes. Configurez ceci dans l'application Vendo sous **Settings > Customer Identifier**.
</Warning>

#### Fusion d'identités

Si un abonné push (identifié par l'ID OneSignal) se connecte ensuite ou finalise un achat, Vendo appelle `OneSignal.login()` avec son Shopify Customer ID ou son e-mail. OneSignal associe l'abonnement push à l'utilisateur identifié — aucun doublon d'utilisateur n'est créé. Tous les abonnements push passés sont conservés, et les événements côté serveur (commandes, exécutions) atteignent le bon profil utilisateur.

### Tags clients

Vendo synchronise les propriétés des clients sous forme de [tags](./add-user-data-tags) dans OneSignal pour la segmentation. Toutes les valeurs sont stockées sous forme de chaînes (format natif d'OneSignal).

| Tag                       | Description                                 |
| ------------------------- | ------------------------------------------- |
| `email`                   | E-mail du client                            |
| `first_name`              | Prénom                                      |
| `last_name`               | Nom de famille                              |
| `total_spent`             | Dépenses totales                            |
| `order_count`             | Nombre total de commandes                   |
| `verified_email`          | `"true"` ou `"false"`                       |
| `tax_exempt`              | `"true"` ou `"false"`                       |
| `marketing_state`         | État du consentement marketing              |
| `first_order_date`        | Date de première commande (ISO 8601)        |
| `last_order_date`         | Date de commande la plus récente (ISO 8601) |
| `customer_created_at`     | Date de création du client                  |
| `customer_tags`           | Tags Shopify séparés par des virgules       |
| `email_marketing_consent` | État d'opt-in marketing                     |

### Événements côté client

Vendo suit les [événements personnalisés](./custom-events) côté client sur votre boutique via le Shopify Web Pixel et les envoie à OneSignal. Ces événements ne sont envoyés qu'après identification de l'utilisateur.

| Événement                          | Description                                                        |
| ---------------------------------- | ------------------------------------------------------------------ |
| `page_viewed`                      | Le client visite une page (boutique, caisse ou statut de commande) |
| `product_viewed`                   | Le client consulte une page de détails produit                     |
| `collection_viewed`                | Le client consulte une page de collection de produits              |
| `search_submitted`                 | Le client effectue une recherche sur la boutique                   |
| `product_added_to_cart`            | Un produit est ajouté au panier                                    |
| `product_removed_from_cart`        | Un produit est retiré du panier                                    |
| `cart_viewed`                      | Le client consulte la page du panier                               |
| `checkout_started`                 | Le client commence le paiement                                     |
| `checkout_contact_info_submitted`  | Étape de coordonnées soumise                                       |
| `checkout_address_info_submitted`  | Étape d'adresse soumise                                            |
| `checkout_shipping_info_submitted` | Mode de livraison sélectionné                                      |
| `payment_info_submitted`           | Détails de paiement soumis                                         |
| `checkout_completed`               | Paiement finalisé avec succès                                      |

<Frame caption="Configuration des événements côté client dans Vendo.">
  <img src="https://mintcdn.com/onesignal/dknFSNQuQfw5IM0j/images/integrations/shopify/vendo-client-side-events.png?fit=max&auto=format&n=dknFSNQuQfw5IM0j&q=85&s=c94b99465b8c200ebb1bb475e492f8a1" alt="Vendo client-side events settings showing available custom events" width="865" height="726" data-path="images/integrations/shopify/vendo-client-side-events.png" />
</Frame>

### Événements côté serveur

Les événements commerciaux Shopify sont exportés et transmis à OneSignal via le pipeline Vendo. Ils utilisent toujours le Shopify Customer ID comme `external_id`.

| Événement                   | Description                              |
| --------------------------- | ---------------------------------------- |
| `received_orders`           | Une nouvelle commande est créée          |
| `fulfilled_orders`          | La commande est exécutée/expédiée        |
| `delivered_orders`          | La commande est livrée                   |
| `refunded_orders`           | La commande est entièrement remboursée   |
| `partially_refunded_orders` | La commande est partiellement remboursée |
| `abandoned_checkouts`       | Le paiement est abandonné                |

<Frame caption="Configuration des événements côté serveur dans Vendo.">
  <img src="https://mintcdn.com/onesignal/dknFSNQuQfw5IM0j/images/integrations/shopify/vendo-server-side-events.png?fit=max&auto=format&n=dknFSNQuQfw5IM0j&q=85&s=c9bed30c26b0bec3b8a53eb8cde8098d" alt="Vendo server-side events settings showing available Shopify webhook events" width="865" height="394" data-path="images/integrations/shopify/vendo-server-side-events.png" />
</Frame>

### Propriétés communes des événements

Tous les événements incluent ces propriétés (sous forme de chaînes) :

| Propriété          | Description                     |
| ------------------ | ------------------------------- |
| `order_id`         | Identifiant de commande affiché |
| `shopify_order_id` | ID de commande interne Shopify  |
| `email`            | E-mail du client                |
| `currency`         | Devise de la commande           |
| `source`           | Source de l'événement           |
| `version`          | Version de l'intégration        |

### Fréquence de synchronisation des données

| Type de données        | Fréquence de synchronisation           |
| ---------------------- | -------------------------------------- |
| Tags clients           | Toutes les 4–6 heures                  |
| Événements de commande | Quasi temps réel (en quelques minutes) |
| Paniers abandonnés     | Toutes les 1–2 heures                  |
| Événements d'exécution | Quasi temps réel                       |

## Détails de la plateforme

| Paramètre                  | Valeur                                            |
| -------------------------- | ------------------------------------------------- |
| Méthode de synchronisation | Client + côté serveur via Vendo                   |
| Identité                   | Shopify Customer ID, Email ou OneSignal ID        |
| Déduplication              | Hachage UUID v5 par événement                     |
| Taille de lot              | 1 000 événements par requête                      |
| Format des données         | Toutes les valeurs stockées sous forme de chaînes |

## Cas d'utilisation

### Récupération de panier abandonné

Créez un [Journey](./journeys-overview) déclenché par l'événement `abandoned_checkouts`. Attendez 1 heure après l'abandon, puis envoyez une notification push avec le lien de récupération en utilisant la propriété `checkout_url`.

### Mises à jour du statut de commande

Créez des Journeys pour `fulfilled_orders` et `delivered_orders` pour envoyer des notifications push immédiates avec les informations de suivi lorsque les commandes sont expédiées et livrées.

### Engagement des clients VIP

Créez un [segment](./segmentation) où `total_spent` est supérieur à un seuil, puis envoyez des offres exclusives personnalisées avec le tag `first_name`.

### Campagnes de réengagement

Ciblez les clients inactifs en créant un segment où `last_order_date` est antérieur de plus de 90 jours et envoyez des campagnes de reconquête.

## Sources compatibles

OneSignal fonctionne avec les sources de données Vendo suivantes :

| Source    | Événements | Tags utilisateurs | Audiences |
| --------- | ---------- | ----------------- | --------- |
| Shopify   | Oui        | Oui               | Oui       |
| Stripe    | Oui        | Oui               | Oui       |
| Mixpanel  | —          | —                 | Oui       |
| Segment   | —          | —                 | Oui       |
| Amplitude | —          | —                 | Oui       |

Les événements et tags utilisateurs nécessitent Shopify ou Stripe comme source de données. Les segments d'audience peuvent être construits à partir de n'importe quelle donnée source dans votre jeu de données BigQuery.

***

## Tests

<Steps>
  <Step title="Vérifier le service worker">
    Visitez `https://yourstore.myshopify.com/apps/vendo/OneSignalSDKWorker.js` dans votre navigateur. Vous devriez voir du code JavaScript. Si vous obtenez une erreur 404, vérifiez que l'application Vendo est installée.

    Vous pouvez également ouvrir les DevTools du navigateur (**F12**), aller dans **Application > Service Workers** et confirmer que `OneSignalSDKWorker.js` est enregistré avec un scope `/apps/vendo/`.
  </Step>

  <Step title="Tester l'invite push">
    Ouvrez votre boutique dans une fenêtre de navigation privée/incognito. Vous devriez voir l'invite de permission de notification OneSignal. Cliquez sur **Autoriser** pour vous abonner.
  </Step>

  <Step title="Envoyer une notification de test">
    Dans le tableau de bord OneSignal, accédez à **Messages > Push > New Message**. Envoyez une notification de test à votre abonné et vérifiez qu'elle apparaît.
  </Step>

  <Step title="Vérifier les données utilisateur dans OneSignal">
    Accédez à **Audience > Subscriptions** et confirmez que votre abonnement de test apparaît. Vérifiez que les tags utilisateur (e-mail, nom, etc.) se synchronisent pour les utilisateurs identifiés.
  </Step>

  <Step title="Déclencher un événement de test">
    Parcourez un produit ou effectuez un paiement test sur votre boutique. Confirmez que l'événement apparaît dans l'activité de l'utilisateur dans le tableau de bord OneSignal.
  </Step>
</Steps>

***

## Dépannage

### Le service worker renvoie 404

Le service worker doit se trouver à `/apps/vendo/OneSignalSDKWorker.js`. Si vous voyez une erreur 404 au chemin racine (`/OneSignalSDKWorker.js`), le chemin du service worker n'est pas configuré dans OneSignal — suivez l'[étape de configuration du service worker](#configure-the-service-worker-path). Si le 404 est au chemin `/apps/vendo/`, vérifiez que l'application Vendo est installée et que le bloc de thème est activé.

### L'invite push n'apparaît pas

Vérifiez que le bloc de thème Vendo est activé dans **App embeds**. Vérifiez que votre navigateur autorise les notifications (cliquez sur l'icône de cadenas dans la barre d'adresse). Essayez une fenêtre de navigation privée au cas où l'invite aurait été précédemment refusée.

### Les tags n'apparaissent pas dans OneSignal

Les tags ne se synchronisent que pour les utilisateurs identifiés — les visiteurs anonymes ne sont pas suivis. Assurez-vous que l'utilisateur a été identifié via un abonnement push, une connexion, une inscription à la newsletter ou un paiement. Les premières synchronisations de tags peuvent prendre plusieurs heures.

### Les événements ne se déclenchent pas

Vérifiez que les événements sont activés dans l'application Vendo sous **OneSignal > Events**. Les événements côté client nécessitent que le Shopify Web Pixel soit actif et que l'utilisateur soit identifié. Les événements côté serveur nécessitent que la REST API Key soit configurée.

### Les notifications affichent "Livré" mais n'apparaissent pas

L'intégration fonctionne — le problème vient de vos paramètres de notification du navigateur ou du système d'exploitation. Vérifiez les paramètres de notification de votre système d'exploitation pour votre navigateur, assurez-vous que le mode Ne pas déranger / Concentration est désactivé, et vérifiez les permissions de notification au niveau du navigateur.

***

## FAQ

### Puis-je changer l'identifiant client après la configuration ?

Oui. Mettez à jour le paramètre dans l'application Vendo sous **Settings > Customer Identifier**. Changer l'identifiant peut créer des profils utilisateur séparés si les utilisateurs existants ont déjà été identifiés avec la méthode précédente.

### L'intégration Vendo prend-elle en charge les applications mobiles ?

L'intégration Vendo se concentre sur les boutiques Shopify et le push web. Si vous avez également une application mobile, assurez-vous que l'identifiant que vous sélectionnez dans Vendo correspond à celui que vous utilisez dans votre application mobile pour que les profils utilisateurs restent cohérents.

### Que se passe-t-il si un visiteur n'est jamais identifié ?

Les événements des visiteurs non identifiés ne sont pas envoyés à OneSignal. Une fois que le visiteur s'identifie (en s'abonnant au push, en se connectant, en s'inscrivant à une newsletter ou en finalisant un achat), Vendo commence à envoyer des événements. Cette approche réservée aux utilisateurs identifiés évite les doublons et garantit des données propres.

### Pourquoi Vendo utilise-t-il une approche réservée aux utilisateurs identifiés ?

Les versions précédentes suivaient les visiteurs anonymes en utilisant le cookie de session Shopify comme identifiant. Cela créait des utilisateurs OneSignal en double qui ne pouvaient jamais être correctement fusionnés, entraînant des comptages d'utilisateurs gonflés et des données fragmentées. L'approche réservée aux utilisateurs identifiés garantit que chaque utilisateur OneSignal est réel et exploitable.

***

## Pages associées

<Columns cols={2}>
  <Card title="Keys & IDs" icon="key" href="./keys-and-ids">
    Trouvez votre App ID et votre clé REST API OneSignal.
  </Card>

  <Card title="Événements personnalisés" icon="bolt" href="./custom-events">
    Suivez le comportement des utilisateurs et déclenchez des automatisations basées sur les événements Shopify.
  </Card>

  <Card title="Configuration push web" icon="globe" href="./web-push-setup">
    Configurez les notifications push web pour votre boutique Shopify.
  </Card>

  <Card title="Invites de permission web" icon="bell" href="./permission-requests">
    Configurez comment et quand inviter les visiteurs à autoriser le push web.
  </Card>
</Columns>