SDK JavaScript

SDK JavaScript

1

Installez le SDK

Voici la balise Specific. Copiez et collez-la dans le code de chaque page de votre site Web ou application Web, là où vous souhaitez que Specific suive vos utilisateurs. Collez-la immédiatement après l'élément <head>. N'ajoutez pas plus d'une balise Specific par page.

Assurez-vous de remplacer votre WORKSPACE_ID dans la dernière ligne. Vous pouvez le trouver ici dans la section Intégrations.

<script type="text/javascript">
  (function(l, e, a, p) {
    if (window.Specific) return
    window.Specific = function() {
      S._queue.push(arguments)
    }
    var S = window.Specific
    S.appId = a
    S._queue = []
    a = l.createElement('script')
    a.async = 1
    a.src = e + '?id=' + S.appId
    p = l.getElementsByTagName('script')[0]
    p.parentNode.insertBefore(a, p)
  })(document, 'https://cdn.specific.app/bundle.js', 'ID_ATELIER')
</script>

2

Identifier les utilisateurs

Ceci est important si vous souhaitez savoir qui a dit quoi ; sinon, toutes les réponses resteront anonymes.

Lorsqu'un utilisateur visite une page avec notre SDK, il reçoit un identifiant de visiteur unique qui permet des sondages ciblés. Cependant, les utilisateurs restent non authentifiés tant que leurs identifiants de visiteur ne correspondent pas aux identifiants utilisateur uniques dans votre système.

Si vous utilisez déjà des identifiants dans votre système, nous vous recommandons de synchroniser les identifiants sur toutes les plateformes pour un ciblage cohérent et éviter de répéter les enquêtes.

Exigences pour les pièces d'identité :

  • Unique : Aucun utilisateur ne partage le même identifiant.

  • Cartographiable : Les identifiants sont liés à votre système interne.

  • Statique : Les identifiants restent les mêmes au fil du temps.

Définir l'ID utilisateur

Utilisez setUserId pour assigner un identifiant d'utilisateur (jusqu'à 256 caractères) lors de la connexion. Cette fonction peut être appelée en toute sécurité plusieurs fois et garantit la cohérence de l'identification de l'utilisateur à travers les sessions.

Specific('definirUtilisateurId', 'ID_UTILISATEUR');

Déconnexion

Lorsque qu'un utilisateur se déconnecte de votre site ou produit, assurez-vous de le déconnecter également de notre système. Cela évite que de nouvelles actions soient attribuées par erreur à un mauvais utilisateur. Gardez à l'esprit que si vous utilisez cela pour un utilisateur non authentifié, un nouvel identifiant sera créé et compté séparément par rapport à votre limite d'utilisateurs.

Specific('déconnecterUtilisateur');

3

Suivez un événement pour déclencher des enquêtes

Les événements sont utilisés pour déclencher des sondages ou cibler des utilisateurs spécifiques en fonction de leurs actions au sein de votre produit. En suivant ces événements, vous pouvez vous assurer que les sondages sont affichés au bon moment et pour le bon public.

Types d'événements

Notre plateforme prend en charge deux types d'événements pour déclencher et filtrer les sondages :

  • Événements sans code : Ces événements peuvent être configurés par les membres de l'équipe sans accéder à la base de code, ce qui les rend idéaux pour des mises à jour rapides ou des expérimentations. Les événements sans code peuvent être configurés ultérieurement grâce à notre interface intuitive.

  • Événements avec code : Ces événements nécessitent qu'un développeur implémente le suivi directement dans votre base de code. Ils sont hautement personnalisables et peuvent inclure des propriétés supplémentaires pour un meilleur ciblage ou comportement.

Configurer des événements sans code

Les événements sans code peuvent être configurés directement via l'interface des événements sans modifier le code de votre application. Cela permet à vos équipes non techniques de définir et de gérer rapidement des événements pour déclencher des enquêtes.

Mise en œuvre des événements de code

Pour suivre un événement de code, vous pouvez utiliser le fragment suivant dans votre application. Cela suit l'événement en arrière-plan :

Specific('événement', 'Nom de l\'événement');

Si vous souhaitez que l'événement déclenche immédiatement un sondage (par exemple, ouvrir un modal après qu'un utilisateur ait cliqué sur un bouton), utilisez cet extrait amélioré. Il fournit un retour instantané sans attendre de réponse du serveur :

Specific('événement', 'Nom de l'événement', { emplacementChargement: 'centre', miseAuPointAutomatique: true });

quatre

Suivez les attributs pour cibler les utilisateurs

Les attributs vous permettent d'atteindre deux objectifs principaux : obtenir plus de contexte sur vos utilisateurs et cibler les enquêtes de manière plus efficace.

En ajoutant des informations sur vos utilisateurs, vous pouvez voir qui a fourni chaque réponse, rendant ainsi les conversations identifiables plutôt qu'anonymes.

En matière de ciblage, les attributs vous permettent de concentrer votre attention. Par exemple, vous pouvez afficher des enquêtes uniquement à des segments d'utilisateurs spécifiques, tels que les utilisateurs avancés ou ceux d'un certain pays. De plus, les attributs facilitent le filtrage et l'analyse des réponses aux enquêtes.

Nom, E-mail

Utilisez setName et setEmail pour attribuer le nom et l'adresse e-mail d'un utilisateur.

Specific('setName', 'John Doe');
Specific('setEmail', 'john@example.com');

Attributs personnalisés

Utilisez setAttributes ou setAttribute pour ajouter tout attribut personnalisé, tel que le pays de l'utilisateur ou s'il est un utilisateur avancé.

// Définir plusieurs attributs
Specific('setAttributes', {
  power_user: true,
  country: "FR"
});

// Définir un seul attribut
Specific('setAttribute', 'country', 'FR');

Langue

Si l'interface utilisateur de votre produit prend en charge plusieurs langues, vous pouvez sonder les utilisateurs dans leur langue maternelle. Utilisez setLanguage avec un code de langue ISO 639-1 (voir la liste des codes de langue) pour définir la langue préférée de l'utilisateur.

Specific('setLanguage', 'fr');

Définition des attributs depuis le backend

Il existe de nombreux cas d'utilisation où vous devez définir des attributs depuis le backend. Vous pouvez le faire aussi ! Voici des exemples pour une chaîne de caractères, un nombre et un booléen.

Vous pouvez générer votre PERSONAL_API_KEY dans Préférences section API et récupérer votre WORKSPACE_ID depuis l'interface des intégrations. Et n'oubliez pas de supprimer les # Commentaires.

curl -X POST 'https://wapi.specific.app/api/v1/user' \
-H 'authorization: PERSONAL_API_KEY' \
-H 'x-app: WORKSPACE_ID' \
-H 'Content-Type: application/json' \
-d '{
  "id": "123456789",            # Requis : ID unique de l'utilisateur
  "name": "John Doe",           # Optionnel : Nom de l'utilisateur
  "email": "john@example.com",  # Optionnel : Email de l'utilisateur
  "group": {                    # Optionnel : Détails du groupe
    "id": "4242424242424242",   # Optionnel : ID du groupe
    "name": "Acme Inc."         # Optionnel : Nom du groupe
  },
  "attrs": [                    # Optionnel : Attributs de l'utilisateur
    {
      "key": "company_size",    # Clé d'attribut optionnelle
      "value": 1000             # Valeur d'exemple
    },
    {
      "key": "active",          # Clé d'attribut optionnelle
      "value": true             # Valeur d'exemple
    },
    {
      "key": "subscription_plan", # Clé d'attribut optionnelle
      "value": "Free"             # Valeur d'exemple
    }
  ]
}'

5

Groupez les utilisateurs (en entreprises, espaces de travail, etc.)

Utilisez la fonction setGroup pour organiser vos utilisateurs en groupes significatifs, tels que des entreprises ou des espaces de travail (par exemple, des espaces de travail dans Figma). Cette fonction assigne un utilisateur à un groupe spécifique—comme un ID d'Entreprise ou d'Espace de travail—lors de la connexion, garantissant ainsi le suivi cohérent des groupes à travers les sessions. Chaque ID de groupe peut contenir jusqu'à 256 caractères.

Recommandations clés :

  • Emplacement : Vous pouvez inclure cet extrait de code n'importe où dans votre application, bien qu'il soit généralement ajouté près de la fonction setUserId lors de l'inscription ou de la connexion de l'utilisateur.

  • Unicité : Assurez-vous que GROUP_ID est un identifiant unique, idéalement l'ID de l'espace de travail ou de l'entreprise de votre base de données.

  • Attributs : Incluez le nom de l'entreprise et tout attribut supplémentaire (par ex., subscription_plan, company_size) pour améliorer les capacités de filtrage et de reporting.

  • Limitations : Un utilisateur ne peut appartenir qu'à un seul groupe à la fois.

Regrouper les utilisateurs vous permet d'analyser les conversations, de filtrer les rapports et de cibler les enquêtes plus efficacement.

Specific('setGroup', 'GROUP_ID', {
    name: 'Acme Inc.',
    attributes: {
        'subscription_plan': 'gratuit',
        'company_size': 1000,
    }
});

Définition des attributs depuis le backend

Si vous devez définir des attributs depuis le backend, vous pouvez également le faire !

Vous pouvez générer votre PERSONAL_API_KEY dans Préférences section API et récupérer votre WORKSPACE_ID depuis l'interface des intégrations. Et n'oubliez pas de supprimer les # Commentaires.

curl -X POST 'https://wapi.specific.app/api/v1/group' \
-H 'authorization: PERSONAL_API_KEY' \
-H 'x-app: WORKSPACE_ID' \
-H 'Content-Type: application/json' \
-d '{
  "id": "4242424242424242", # Requis : ID unique du groupe
  "name": "Acme Inc.", # Optionnel : Nom du groupe
  "attrs": [ # Optionnel : Attributs du groupe
    {
      "key": "active", # Clé d'attribut optionnel
      "value": true # Valeur exemple (groupe est actif)
    },
    {
      "key": "company_size", # Clé d'attribut optionnel
      "value": 1000 # Valeur exemple (nombre d'employés)
    },
    {
      "key": "subscription_plan", # Clé d'attribut optionnel
      "value": "Gratuit" # Valeur exemple (type d'abonnement)
    }
  ]
}'

Vous pouvez en faire plus en utilisant notre API publique. En savoir plus dans notre documentation API.