...

Le javascript SPREAD permet :

de mettre en place les widgets sur votre site web (exemples ci-dessous)
de faire remonter les créations de compte dans la CRM SPREAD
de faire remonter les commandes dans la CRM SPREAD

La CRM Spreadbutton permet ensuite de regrouper les informations commerciales, sociales et comportementales de votre base clients / prospects pour mener des actions spécifiques (fidélisation, animation, relance etc...)

Le javascript de SPREAD a été conçu pour ne pas ralentir le temps d’affichage de vos pages (fonctionnement asynchrone) et ainsi vous garantir un fonctionnement transparent.

JAVASCRIPT 1 - Widgets

Le javasript ci-dessous est à insérer sur toutes les pages du site, juste avant la balise </body>

Sa fonction principale est de permettre de piloter les widgets depuis le backoffice SPREAD. Associé aux javascript de création de compte et de remontée de commandes, il permet également de faire remonter ces infos dans la CRM SPREAD.

Deux possibilités pour intégrer ce JavaScript :

Méthode 1 : Le JavaScript est ajouté uniquement lorsque votre page est chargée (plus rapide)
Méthode 2 : Le JavaScript est ajouté même si le contenu de votre page n'est pas fini d'être chargé (plus lent)

Code Block

language	js
title	Méthode 1

 <script type="text/javascript">

    var publicKeySb = "????????????????";  /*à remplacer par votre clé d’API Publique*/ 
        function loadSpreadTracker(){ window.domLoadEventFired=true;var e=document.createElement("script");e.type="text/javascript";e.async=true;e.id="spread-tracker";e.src="//static-sb.com/js/sb-tracker.js";document.body.appendChild(e) } if(window.addEventListener) { window.addEventListener("load",loadSpreadTracker,false) } else if(window.attachEvent) { window.attachEvent("onload",loadSpreadTracker) } else { window.onload=loadSpreadTracker }
	
</script>

Code Block

language	js
title	Méthode 2

 <script type="text/javascript">

	var publicKeySb = "????????????????" ;  /*à remplacer par votre clé d’API Publique*/ 

	var iproto = (("https:" == document.location.protocol) ? "https://" : "http://");

	document.write(unescape("%3Cscript src='" + iproto + "static-sb.com/js/sb-tracker.js' charset='UTF-8' type='text/javascript'%3E%3C/script%3E"));	

</script>

JAVASCRIPT 2 - Remontée de commandes

Le traqueur de commande permet d’intégrer automatiquement les commandes et les clients dans la CRM de SPREAD (à chaque fois qu’un de vos clients passe une commande).

Le code suivant est à insérer sur la page de confirmation de commande, en plus du tag sur toutes les pages (de préférence avant).

Code Block

<script type="text/javascript">

	var siteid = "????????????????" ; /*à remplacer par votre clé d’API Publique*/              
    var sbactionOrder = 1;			
    var orderemail = "john@doe.com" ; 		
    var orderamount = 13.30 ; 				
    var orderfirstname = "John" ; /* seulement si le nom et le prénom sont séparés*/
    var ordername = "Doe" ; 	/* «John Doe» si pas séparés */
    var idorder = "1340" ;  /* ID de la commande */
    var orderoptin = 1 ; 
    var orderstate = 20 ; /* 10, 20, 50, 100, 0 */
    var ordertest = 0 ;

    var sbOrderNum = "F2013-9743"; /* 2ème numéro de facture possible */

    /* Champs optionnels */
    var birthday = "1975-12-25"; 
    var gender = "male";  /* ou «female» */
    var address = "8, rue de la place";
    var cp = "76000";
    var city = "Rouen";
    var country = "FR";  /* pays au format ISO : FR, ES, IT, DE... */
    var tel = "0235000000";	
    var mobile = "0690870089";
    var fonction = "CEO";
    var company = "My Company";

    /*champs personnalisables */
    var sbCustomFieldText1 = "text1";
    var sbCustomFieldNum1 = 10;
    var sbCustomFieldDate1 = "2010-12-31";
    var sbCustomFieldBool1 = 1;

    /* Tags */
    var add_tag = "tag1, tag2, tag3";
    var del_tag = "tag4";

</script>

Informations obligatoires

Les seules informations obligatoires sont :

le «orderemail» qui est l’adresse email du client
le «siteid» qui est la clé d’API du site et peut être trouvé dans le tableau de bord SPREAD de la boutique ( Paramétrage > Clé API). Si vous avez mis le javascript sur toutes les pages, avec le «publicKeySb» vous n’avez pas besoin de le préciser.
le «sbactionOrder» qui permet de savoir qu’il s’agit d’une commande

Gestion de l’idorder

La valeur «idorder» est l’identifiant unique de la commande sur la boutique. La première fois que cet identifiant est utilisé, la commande est enregistrée dans la CRM. Si l’identifiant de commande est présenté une deuxième fois, les données sont mises à jour.

Cet identifiant est particulièrement utile pour changer l’état de la commande (l’annuler ou la mettre à expédier).

Gestion de l’état de la commande (orderstate)

Si vous avez indiqué l’ «idorder» vous allez pouvoir faire évoluer l’état de la commande au fur et à mesure avec la variable orderstate :

10 : enregistrée
20 : payée
50 : expédiée
100 : reçue
0 : annulée

sbOrderNum est optionnel et peut être utilisé pour passer un numéro de facture différent de l’ID de commande.

Gestion des champs optionnels

Il est possible de faire remonter l'anniversaire, le sexe, l’adresse, le code postal, la ville, le pays, le numéro de téléphone (portable et fixe) du client. Egalement sa fonction et son entreprise pour le BtoB (voir le détail des variables pour le format).

Gestion des champs personnalisables

Avec les variables sbCustomFieldText1, sbCustomFieldNum1, sbCustomFieldDate1 et sbCustomFieldBool1, il est possible d’insérer des infos spécifiques dans la CRM SPREAD. Chaque type peut être passé quatre fois (sbCustomFieldText3, sbCustomFieldText4, sbCustomFieldNum3, sbCustomFieldNum4,…).

Exemple :

sbCustomFieldText1 : «BtoB»
sbCustomFieldText2 : «Vendeur»
sbCustomFieldNum1 : 55
sbCustomFieldNum2 : 87
sbCustomFieldDate1 : «1965-09-05»
sbCustomFieldDate2 : «1986-12-23»
sbCustomFieldBool1 : 0
sbCustomFieldBool2 : 1

Gestion des tags

Avec les tags vous pouvez ajouter des informations concernant votre client ou ses commandes. Ils sont exclusivement liés à un client.

La variable add_tag permet d’ajouter des tags (séparés par une virgule).

La variable del_tag permet de supprimer des tags (séparés par une virgule).

Exemple :

add_tag : « tag1,tag2,tag3 »
del_tag : « tag4 »Javascript 3 - création de compte

Ce javascript permet d’intégrer automatiquement les visiteurs qui créent un compte sur votre site directement dans la CRM de SPREAD.

Le code suivant est à insérer sur la page de confirmation de création du compte, en plus du tag sur toutes les pages.

Javascript 3 - création de compte

Ce javascript permet d’intégrer automatiquement les visiteurs qui créent un compte sur votre site directement dans la CRM de SPREAD.

Le code suivant est à insérer sur la page de confirmation de création du compte, en plus du tag sur toutes les pages.

Code Block

language	js

<script type="text/javascript">
var siteid = "????????????????" ; /*à remplacer par votre clé d’API*/
var sbactionSignup = 1; 
var orderemail = "john@doe.com" ; 
var orderfirstname = "John" ; /* seulement si le nom et le prénom sont séparés*/
var ordername = "Doe" ; /* «John Doe» si pas séparés */ 
var orderoptin = 1 ; 
var ordertest = 0 ; 


/* Champs optionnels */
var birthday = "1975-12-25"; 
var gender = "male"; /* ou «female» */
var address = "8, rue de la place";
var cp = "76000";
var city = "Rouen";
var country = "FR"; /* pays au format ISO : FR, ES, IT, DE... */
var tel = "0235000000";
var mobile = "0690870089";
var fonction = "CEO";
var company = "My Company";

/*champs personnalisables */
var sbCustomFieldText1 = "text1";
var sbCustomFieldNum1 = 10;
var sbCustomFieldDate1 = "2010-12-31";
var sbCustomFieldBool1 = 1;

/* Tags */
var add_tag = "tag1, tag2, tag3";
var del_tag = "tag4";

</script>

Informations obligatoires

Les seules informations obligatoires sont :

le «orderemail» qui est l’adresse email du client
le «siteid»
le «sbactionSignup» qui permet de savoir qu’il s’agit d’une création de compte

Détail des variables

...

Clé API Publique Spread (Paramètrage > Tracker)

...

chaîne

facultatif si «publicKeySb» est définie

...

orderemail

...

chaîne

obligatoire

...

orderamount

...

Montant de la commande

...

num

point en séparateur de décimal

...

Prénom du client

...

chaîne

...

ordername

...

Nom du client.

(Si le prénom n’est pas dissocié, ne pas mettre orderfirstname et mettre le nom ET le prénom dans ordername)

...

chaîne

...

Identifiant unique de commande

...

chaîne, fortement conseillée

...

Le client accepte de recevoir votre newsletter

...

boolean 1 ou 0

orderstate

Etat de la commande

...

integer
10 : enregistrée

20 : payée

50 : expédiée

100 : reçue

0 : annulée

...

à 1, le script affiche les valeurs chargées au lieu d’effectuer le tracking

...

boolean

1 ou 0

...

Possibilité de passer une chaîne de caractère

...

Possibilité de passer une valeur

...

Possibilité de passer une date

...

date

("YYYY-MM-DD")

...

Possibilité de passer un booléen

...

boolean

1 ou 0

...

Pour passer un numéro de commande (public contrairement à l’idorder)

...

Variables	Description	Type
birthday	Date d'anniversaire	date ("YYYY-MM-DD")
gender	Sexe : female ou male	chaîne
address	Adresse	chaîne
cp	Code Postal	chaîne
city	Ville	chaîne
country	Pays	chaîne
tel	Numéro de téléphone	chaîne
mobile	Numéro de portable	chaîne
fonction	Fonction occupée dans l'entreprise (BtoB)	chaîne
company	Entreprise du client (BtoB)	chaîne
add_tag	Possibilité de passer des informations liées au client (Abonnement, etc...)	chaîne
del_tag	Possibilité de supprimer un tag ajouté précédemment	chaîne

Intégration solutions e-commerce

Découvrez dans la documentation «solutions» l’intégration avec votre logiciel ecommerce.

A télécharger ici : http://sb.am/public/Integration_traqueur_SB_solution.pdf

Historique du document

2.3 - 28 mars 2014 : gestion des tags et ajout de champs optionnels : adresse, ville, code postal, téléphone, fonction, entreprise.

2.2 - 17 novembre 2013 : charset UTF-8 dans le javascript

2.1 - 23 juillet 2013 : séparation nom / prénom

2.0 - 6 juin 2013 : détails sur les widgets

1.9 - 27 mai 2013 : ajout de détails sur les variables et les javascript

1.8 - 27 janvier 2013 : ajout des variables anniversaire, sexe et pays

1.7 - 4 janvier 2013 : ajout du sbOrderNum

1.6 - 27 novembre 2012 : remplacement de static.sb.am par static-sb.com dans le code de tracking

1.5 - 27 octobre 2012 : ajout des «custom fields» qui permettent d’insérer des infos de type text, num, date ou boolean dans la CRM

1.4 - 19 octobre 2012 : nouvelle version du javascript et nouveau code à insérer qui gère l’inscription à l’espace client d’un site e-commerce et des actions personnalisées

1.3 - 18 avril 2012 : nouvelle version du javascript à installer sur tout le site pour pouvoir activer les widgets

1.2.2 - 12 janvier 2012 : lien vers le document spécifique sur les solutions ecommerce

1.2.1 - 1 décembre 2011 : détails 42Stores

1.2 - 17 novembre 2011 : ajout du protocole HTTPS

Les paramètres n’ont pas changé, si votre site n’utilise pas de https sur votre page de conversion, vous n’avez pas besoin de mettre à jour.

1.1.1 - 14 octobre 2011 : correction des " autour de la clé d’API dans le javascript. Nouvelle version du plugin Prestashop

1.1 - 3 octobre 2011 : ajout des informations sur l’ensemble des plateformes et solutions ecommerce.

1.0 - version initiale

...

Image Added Pour être informés de toutes les mises à jour concernant l’API de SPREAD, inscrivez-vous ici : https://social-sb.com/z/newsletter-api-v1-v2

Info

title	Sommaire

Table of Contents

maxLevel	2

Warning
Si vous utilisez un gestionnaire de tag type Google Tag Manager pour intégrer SPREAD, passez par cette documentation.

Fonctionnalités de l'intégration en JavaScript

Le JavaScript de SPREAD permet :

d'afficher les widgets sur votre site web
de remonter les créations de compte dans SPREAD
de remonter les commandes dans SPREAD

Le JavaScript de SPREAD a été conçu pour ne pas ralentir le temps d’affichage de vos pages (fonctionnement asynchrone) et ainsi vous garantir un fonctionnement transparent.

Warning

title	Avertissement

L'intégration de SPREAD demandant du temps, pour utiliser SPREAD en attendant, nous vous recommandons d'importer votre CRM et de la mettre à jour toutes les semaines !

Voir les documentations sur l'import

Il n'est pas nécessaire d'attendre la fin de l'intégration pour communiquer auprès de vos contacts ou mettre en place des opérations marketing.

Par exemple, vous pouvez contacter des profils importés tant qu'ils ont des consentements valides. Voir la documentation sur le RGPD
Dans un premier temps, vous pouvez aussi partager des opérations sur vos réseaux sociaux ou à travers des newsletters. L'intégration vous permettra ensuite d'afficher des widgets sur votre site. Voir les conseils pour partager une opération

JAVASCRIPT 1 - Affichage des widgets

Ce JavaScript est à insérer sur toutes les pages du site, dans le footer juste avant la balise </body>.

Sa fonction principale est de permettre de piloter les widgets depuis le back office SPREAD.

Associé aux scripts de remontée de création de compte (JavaScript 2) et à la remontée des commandes (JavaScript 3), il permet également de faire remonter des informations dans la CRM SPREAD.

Cliquez ici pour accéder aux exemples de code et intégrez le code JAVASCRIPT entre les commentaires suivants :

Début : // JAVASCRIPT 1 - Affichage des widgets

Fin : // Fin JAVASCRIPT 1

Dans ce script, modifiez <PUBLIC_KEY> par votre clé d'API publique que vous trouverez dans votre back office (onglet Paramétrage > Tracker)

Note

title	Attention

N'intégrez pas directement le fichier sb-tracker.js sur votre site !

Si vous le faites, vous ne pourrez pas bénéficier des mises à jour que nous réalisons régulièrement.

Détail des variables

Variables	Description	Type
public_key	Clé API publique SPREAD (à trouver dans Paramètrage > Tracker)	chaîne obligatoire
debug	True permet d'afficher les logs dans la console	boolean true ou false
set_cookie	True permet d'attribuer le cookie aux clients Important pour le parrainage et les widgets sur segment par exemple	boolean true ou false
track_order_enabled	True permet aux remontées de commandes et de créations de compte de se faire dans le JavaScript et en GET	boolean true ou false

La fonction loadSpreadTracker

Cette fonction doit être placée sur toutes les pages de votre site.

Elle est essentielle au bon fonctionnement de nos scripts et doit être placée après le script spconfig.

JAVASCRIPT 2 - Remontée des créations de compte

Ce JavaScript permet d’intégrer automatiquement les visiteurs dans la CRM de SPREAD lorsqu'ils créent un compte sur votre site.

Le code suivant est à insérer sur la page de confirmation de création du compte dans le footer,en plus du tag sur toutes les pages et avant la fonction loadSpreadTracker.

Note
L'optin est toujours récolté au nom d'optin, mais pour répondre au RGPD nous réattribuons cela dans un consentement dans SPREAD. Pour que cela soit fonctionnel, pensez à configurer "Paramètrage > Tracker > RGPD"

Cliquez ici pour accéder aux exemples de code et intégrez le code JAVASCRIPT entre les commentaires suivants :

Début : // JAVASCRIPT 2 - Remontée des créations de compte

Fin : // Fin JAVASCRIPT 2

Informations obligatoires

Pour remonter les nouveaux clients, seulement certaines données doivent impérativement être présentes dans le script. Il s'agit de :

«email» l’email du client.
«action : "signup" » permet de détecter qu'il s'agit d'une création de compte.

Détail des variables

Variables	Description	Type
email	Adresse email du client	chaîne obligatoire
name	Nom du client. (Si le prénom n’est pas dissocié, ne pas mettre firstname et mettre le nom ET le prénom dans name)	chaîne
firstname	Prénom du client	chaîne
optin	Etat de l'abonnement à la newsletter	boolean 1 ou 0 (ou -1)
country	Pays	chaîne
birthday	Anniversaire	date yyyy-mm-dd
gender	Civilité	chaîne male ou female
address	Adresse (Numéro et rue)	chaîne
cp	Code postal	chaîne
city	Ville	chaîne
tel	Numéro de téléphone	chaîne
mobile	Numéro de téléphone mobile	chaîne
tel_optin	Le numéro de téléphone est il disposé à recevoir des appels de votre part	boolean 1 ou 0
mobile_optin	Le numéro de téléphone mobile est il disposé à recevoir des sms de votre part	boolean 1 ou 0
fonction	Poste dans l'entreprise	chaîne
company	Nom de l'entreprise	chaîne
action	"signup" Permet de détecter qu'il s'agit d'une création de compte dans le back office SPREAD	chaîne obligatoire
add_tag	Indique un ou plusieurs tag dans la fiche du client	chaîne
del_tag	Supprime un ou plusieurs tag dans la fiche du client	chaîne
custom_fields	Champs personnalisés	Multiple

JAVASCRIPT 3 - Remontée de commandes

Ce JavaScript permet de remonter automatiquement les commandes et les informations clients dans la CRM de SPREAD lorsqu'ils passent commande sur votre site.

Le code suivant est à insérer sur la page de confirmation de commande dans le footer, en plus du tag sur toutes les pages et avant la fonction loadSpreadTracker.

Note
L'optin est toujours récolté au nom d'optin, mais pour répondre au RGPD nous ré-attribuons cela dans un consentement dans SPREAD. Pour que cela soit fonctionnel, pensez à configurer "Paramètrage > Tracker > RGPD"

Cliquez ici pour accéder aux exemples de code et intégrez le code JAVASCRIPT entre les commentaires suivants :

Début : // JAVASCRIPT 3 - Remontée de commandes

Fin : // Fin JAVASCRIPT 3

Tip

title	Astuce de l'équipe

Si vous souhaitez faire remonter des champs qui sont propres à votre secteur d'activité, vous pouvez utiliser les champs personnalisés.

Informations obligatoires

Pour la remontée de commandes, seulement certaines données doivent impérativement être présentes dans le script. Il s'agit de :

«email» l’email du client,
«idorder» la référence commande,
«amount» le montant,
«state» le statut de la commande,
«date» la date de la commande,
«action : "order" » permet de détecter qu'il s'agit d'une commande vous pourrez alors vérifier votre remontée de commandes.

Détail des variables

Variables	Description	Type
email	Adresse email du client	chaîne obligatoire
amount	Montant de la commande	numérique obligatoire - Point en séparateur de décimale
idorder	Référence de la commande	chaîne obligatoire
date	Date de la commande	date obligatoire (yyyy-mm-dd hh:mm:ss UTC)
state	Statut de la commande	0 : annulée 10 : enregistrée 20 : payée 50 : envoyée 100 : reçue obligatoire
name	Nom du client. (Si le prénom n’est pas dissocié, ne pas mettre firstname et mettre le nom ET le prénom dans name)	chaîne
firstname	Prénom du client	chaîne
optin	Etat de l'abonnement à la newsletter	boolean 1 ou 0
country	Pays	chaîne
birthday	Anniversaire	date yyyy-mm-dd
gender	Civilité	chaîne male ou female
address	Adresse (Numéro et rue)	chaîne
cp	Code postal	chaîne
city	Ville	chaîne
tel	Numéro de téléphone	chaîne
mobile	Numéro de téléphone mobile	chaîne
tel_optin	Le numéro de téléphone est il disposé à recevoir des appels de votre part	boolean 1 ou 0
mobile_optin	Le numéro de téléphone mobile est il disposé à recevoir des sms de votre part	boolean 1 ou 0
fonction	Poste dans l'entreprise	chaîne
company	Nom de l'entreprise	chaîne
action	"order" Permet de détecter qu'il s'agit d'une commande dans le BackOffice SPREAD, vous permet ainsi de les retrouver dans "Paramétrage > Tracker > Vérifier la remontée de commandes"	chaîne obligatoire
add_tag	Indique un ou plusieurs tag dans la fiche du client	chaîne
del_tag	Supprime un ou plusieurs tag dans la fiche du client	chaîne
add_order_tag	Indique un ou plusieurs tag sur les commandes	chaîne
del_order_tag	Supprime un ou plusieurs tag sur les commandes	chaîne
custom_fields	Champs personnalisés	Multiple

Vous pouvez également ajouter davantage de détails à vos commandes avec les attributs produits.

Gestion de l'idorder

La valeur «idorder» est l’identifiant unique de la commande sur la boutique.

La première fois que cet identifiant est utilisé, la commande est enregistrée dans la CRM. Si l’identifiant de commande est présenté une deuxième fois, les données sont mises à jour.

Cet identifiant est particulièrement utile pour changer l’état de la commande (l’annuler ou la mettre à expédier).

Gestion de l’état de la commande (state)

Grâce à l’«idorder» vous allez pouvoir faire évoluer l’état de la commande au fur et à mesure avec la variable state :

10 : Enregistré
20 : Payé
50 : Expédié
100 : Reçu
0 : Annulé

Tip

title	Astuce de l'équipe

L'intégration de SPREAD demandant du temps, pour utiliser SPREAD en attendant, nous vous recommandons d'importer votre CRM et de la mettre à jour toutes les semaines !

Voir les documentations sur l'import

Il n'est pas nécessaire d'attendre la fin de l'intégration pour communiquer auprès de vos contacts ou mettre en place des opérations marketing.

Par exemple, vous pouvez contacter des profils importés tant qu'ils ont des consentements valides. Voir la documentation sur le RGPD
Dans un premier temps, vous pouvez aussi partager des opérations sur vos réseaux sociaux ou à travers des newsletters. L'intégration vous permettra ensuite d'afficher des widgets sur votre site. Voir les conseils pour partager une opération

Note

title	Remarque

Une fois l'intégration de SPREAD terminée, vous devez réaliser un import de l'historique de vos commandes !

Cliquez ici pour consulter la documentation sur l'import de fichier CSV

Versions Compared

Old Version 9

New Version Current

Key

JAVASCRIPT 2 - Remontée de commandes

Informations obligatoires

Gestion de l’idorder

Gestion de l’état de la commande (orderstate)

Gestion des champs optionnels

Gestion des champs personnalisables

Gestion des tags

Javascript 3 - création de compte

Informations obligatoires

Détail des variables

Intégration solutions e-commerce

Historique du document

Fonctionnalités de l'intégration en JavaScript

JAVASCRIPT 1 - Affichage des widgets

JAVASCRIPT 2 - Remontée des créations de compte

JAVASCRIPT 3 - Remontée de commandes

Page Comparison

Versions Compared

Old Version 9

New Version Current

Key

JAVASCRIPT 2 - Remontée de commandes

Informations obligatoires

Gestion de l’idorder

Gestion de l’état de la commande (orderstate)

Gestion des champs optionnels

Gestion des champs personnalisables

Gestion des tags

Javascript 3 - création de compte

Informations obligatoires

Détail des variables

Intégration solutions e-commerce

Historique du document

Fonctionnalités de l'intégration en JavaScript

JAVASCRIPT 1 - Affichage des widgets

JAVASCRIPT 2 - Remontée des créations de compte

JAVASCRIPT 3 - Remontée de commandes