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

# Shopify

> Suivi automatique des conversions pour les boutiques Shopify — ajoutez un script et configurez des webhooks

import { Steps, Step } from "fumadocs-ui/components/steps";

L'intégration Shopify de Taapit fournit un suivi de conversion **entièrement automatique** sans app à installer. Ajoutez un script dans votre thème, configurez trois webhooks, et chaque checkout et commande est automatiquement attribué à vos liens Taapit.

## Comment ça marche

<Frame>
  <img src="https://mintcdn.com/taapit/XwQ3OGJ9I1yOhz_n/images/shopify/visual_shopify.png?fit=max&auto=format&n=XwQ3OGJ9I1yOhz_n&q=85&s=262c5062cad1e7adaecb0ae9830d24f4" alt="Taapit Shopify integration" width="1664" height="822" data-path="images/shopify/visual_shopify.png" />
</Frame>

## Fonctionnalités

* ✅ **Aucune app requise** – Juste un script et des webhooks
* ✅ **Suivi automatique** – Chaque checkout et commande est suivi
* ✅ **Attribution complète** – Fonctionne entre les sessions (cookie 90 jours)
* ✅ **Synchronisation en temps réel** – Les événements apparaissent instantanément
* ✅ **Multi-devise** – Supporte toutes les devises Shopify

## Prérequis

<Warning>
  **Important** : Pour que le suivi des conversions fonctionne, les utilisateurs
  doivent arriver sur votre boutique via un **deeplink Taapit**. C'est ainsi que
  l'ID de suivi (`ta_tid`) est généré et transmis à votre boutique.
</Warning>

<Warning>
  **Masquez le bouton "Acheter maintenant"** : Le bouton Acheter maintenant
  (checkout accéléré) contourne le panier et va directement au paiement — ce
  flux **ne peut pas être tracké**. Vous devez le désactiver dans votre thème
  afin que tous les clients passent par le flux standard Ajouter au panier →
  Commander.

  Pour le masquer : ouvrez l'éditeur de thème → sélectionnez une section de
  page produit → trouvez **Boutons de paiement dynamiques** et décochez-le,
  puis enregistrez.
</Warning>

Avant de commencer :

1. **Créez un deeplink Taapit** pointant vers votre boutique Shopify ou une page produit
2. **Activez le suivi des conversions** sur votre lien dans le dashboard Taapit

## Installation

<Steps>
  <Step title="Ajoutez le script dans theme.liquid">
    Copiez ce script :

    ```html theme={null}
    <script
      defer
      src="https://taap.it/api/shopify/script"
    ></script>
    ```

    Puis ajoutez-le dans votre thème :

    1. Dans l'admin Shopify, allez dans **Boutique en ligne** → **Thèmes**
    2. Cliquez sur **Personnaliser** → **Modifier le code** sur votre thème actif
    3. Ouvrez le fichier **theme.liquid**
    4. Collez le script juste avant la balise fermante `</head>`, puis enregistrez

    Le script capture l'ID de suivi `ta_tid` depuis les liens Taapit et le stocke dans un cookie et le localStorage pendant 90 jours. Il attache également l'ID de suivi aux attributs du panier pour qu'il survive jusqu'à la commande.
  </Step>

  <Step title="Configurez les Webhooks">
    Vous devez créer **3 webhooks** dans Shopify pointant vers votre URL webhook Taapit.

    Votre URL webhook (disponible dans votre dashboard Taapit sous Paramètres → Analytics → Shopify) :

    ```
    https://track.taap.it/api/shopify/webhook?workspaceId=VOTRE_WORKSPACE_ID
    ```

    **Étapes de configuration dans Shopify :**

    1. Dans l'admin Shopify, allez dans **Paramètres** → **Notifications**
    2. Faites défiler jusqu'à la section **Webhooks** et cliquez sur **Créer un webhook**
    3. Choisissez l'événement : **Paiement de commande** → collez l'URL webhook → enregistrez
    4. Répétez pour **Création de checkout**
    5. Répétez pour **Mise à jour de checkout**

    <Warning>
      Vous devez créer **3 webhooks distincts** avec la même URL :

      * `orders/paid` → enregistre un événement **Vente**
      * `checkouts/create` → enregistre un événement **Lead**
      * `checkouts/update` → met à jour le Lead si le panier change

      Votre workspace ID est déjà inclus dans l'URL affichée dans votre dashboard.
    </Warning>
  </Step>

  <Step title="Vérifiez la configuration">
    1. Visitez votre boutique depuis un lien Taapit (vous devriez voir `?ta_tid=xxx` dans l'URL)
    2. Vérifiez DevTools → Application → Cookies pour le cookie `ta_tid`
    3. Ajoutez un produit au panier et passez au checkout
    4. Consultez l'onglet **Analytics** dans Taapit — un événement Lead devrait apparaître
    5. Finalisez une commande test — un événement Vente devrait apparaître
  </Step>
</Steps>

## Comment le suivi fonctionne

1. **Le visiteur arrive** via un lien Taapit avec `?ta_tid=xxx`
2. **Le script capture** le `ta_tid` et le stocke dans un cookie et le localStorage
3. **Le script ajoute** l'ID de suivi aux attributs du panier (persiste jusqu'au paiement)
4. **Le client clique sur Commander** — l'ID de suivi est transmis via les attributs du panier
5. **Le webhook de commande** envoie les détails + ID de suivi à Taapit
6. **La conversion est enregistrée** et attribuée au lien original

<Warning>
  Ce flux ne fonctionne que si le client passe par le **checkout standard via le
  panier**. Le bouton Acheter maintenant (checkout accéléré) contourne le panier,
  donc l'ID de suivi n'est jamais rattaché. Assurez-vous de le désactiver dans
  votre thème.
</Warning>

## Événements suivis

| Événement Shopify  | Événement Taapit | Quand                         |
| ------------------ | ---------------- | ----------------------------- |
| `checkouts/create` | Lead             | Le client démarre le checkout |
| `checkouts/update` | Lead mis à jour  | Le panier est modifié         |
| `orders/paid`      | Vente            | La commande est payée         |

## Dépannage

<AccordionGroup>
  <Accordion title="Le cookie ta_tid n'est pas défini">
    Assurez-vous de visiter la boutique depuis un lien Taapit contenant `?ta_tid=xxx` dans l'URL. Le script ne définit le cookie que lorsque ce paramètre est présent.
  </Accordion>

  <Accordion title="Les conversions n'apparaissent pas">
    1. Vérifiez que le script est présent dans votre theme.liquid (avant `</head>`)
    2. Vérifiez que les 3 webhooks sont correctement configurés avec votre workspace ID
    3. Vérifiez que le bouton Acheter maintenant est masqué — les commandes passées par ce bouton ne peuvent pas être trackées
    4. Vérifiez la présence du cookie `ta_tid` dans les DevTools de votre navigateur
  </Accordion>

  <Accordion title="Compatibilité des thèmes">
    Fonctionne avec tous les thèmes Shopify permettant la modification du theme.liquid. Pour les configurations headless (Hydrogen, storefronts personnalisés), utilisez l'[intégration manuelle côté client](/fr/conversions/manual/client-side).
  </Accordion>
</AccordionGroup>

## Prochaines étapes

<CardGroup cols={2}>
  <Card title="Intégration Stripe" icon="stripe" href="/fr/conversions/automatic/stripe">
    Vous utilisez aussi Stripe ? Ajoutez l'intégration Stripe.
  </Card>

  <Card title="Créer votre premier lien" icon="link" href="/fr/links/create">
    Créez un lien Taapit pour commencer le suivi.
  </Card>
</CardGroup>