Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Menu

  1. A quoi sert le Javascript de SPREAD
DOCUMENTATION EN COURS
  1. Javascript 1 - Affichage des widgets
    1. La Fonction loadSpreadTracker
  2. Javascript 2 - Remontées des créations de compte
    1. Informations obligatoires
  3. Javascript 3 - Remontées des commandes

DOCUMENTATION EN COURS DE MODIFICATION

Les scripts sont indiqués dans Paramétrage > Tracker > Indiquez "Autre" dans la liste déroulante des solutions ecommerce. 

N'hésitez pas à vous adresser au support en cas de doute. 

Anchor
Titre_un
Titre_un

A quoi sert le Javascript de SPREAD? 

Le javascript de SPREAD permet :

  •  d'afficher les widgets sur votre site web (Javascript 1),
  •  de faire remonter les créations de compte dans la CRM SPREAD (Javascript 2),
  •  de faire remonter les commandes dans la CRM SPREAD (Javascript 3).

 

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.

Anchor
Titre_deux
Titre_deux

JAVASCRIPT 1 - Widgets

Ce javascript 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é à la remontée de création de compte (Javascript 2) et à la remontée des commandes (Javascript 3), il permet également de faire remonter ces infos dans la CRM SPREAD.

 

Code Block
languagejs
themeEmacs
titleJavascript 1 - Affichage des widgets
 <script type="text/javascript">
		var spconfig = {
            public_key: "*****************************",
            debug: false,
            set_cookie: true,
            track_order_enabled: true
        };
        function loadSpreadTracker(){ window.domLoadEventFired=true;var e=document.createElement("script");e.type="text/javascript";e.async=true;e.charset="UTF-8";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>

 

Dans ce script, il vous suffit de modifier les étoiles ( **** ) par votre clé API publique que vous trouverez dans votre BackOffice (onglet Paramétrage > Tracker).

 

Note
titleAttention

N'intégrez pas directement le fichier "sb-tracker.js" sur votre site sans quoi vous ne pourrez pas bénéficier des mises à jour que nous réalisons régulièrement

Anchor

Titre

Titre2_

trois

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

a

Titre_trois

Titre2_a

La Fonction loadSpreadTracker

La fonction loadSpreadTracker est affichée ci-dessus avec le script d'affichage des widgets. Tout comme lui, elle 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 ces derniers. 

Anchor
Titre_trois
Titre_trois

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

Ce javascript permet d’intégrer automatiquement les visiteurs dans la Customer Family 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, en plus du tag sur toutes les pages et avant la fonction loadSpreadTracker.

 

Code Block
languagejs
themeEmacs
titleJavascript 2 - Remontée des créations de compte
<script>
        //var Cesporder code= doit{
être placé avant la fonction loadSpreadTracker()       email:  var sporder = {
   "johndoe@sb.am",
         email: "johndoe@sb.am",             name: "doe",
            firstname: "john",
            customer_cookie : "xxx",
            country : "xxx",
            birthday : "Y-m-d",
            gender : "xxx", // "male" or "female"
            address : "xxx",
            cp : "xxx",
            city : "xxx",
            tel : "xxx",
            mobile : "xxx",
            tel_optin : 1, // 0 or 1
            mobile_optin : 1, // 0 or 1
            fonction : "xxx",
            company : "xxx",
            action : "signup",
            add_tag : ["tag1", "tag2", "tag3"], // Indique un ou plusieurs tags sur la fiche du client
            del_tag : ["tag2", "tag4"], // Supprime un ou plusieurs tags sur la fiche du client
 custom_fields: {          custom_fields:   {
				// Voir Custom_fields ci-dessous
            }
        };
    </script>
 

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


/* Champs optionnels */
var spreadOrderBirthday = "1975-12-25"; 
var spreadOrderGender = "male"; /* ou «female» */
var spreadOrderAddress = "8, rue de la place";
var spreadOrderCp = "76000";
var spreadOrderCity = "Rouen";
var spreadOrderCountry = "FR"; /* pays au format ISO : FR, ES, IT, DE... */
var spreadOrderTel = "0235000000";
var spreadOrderMobile = "0690870089";
var spreadOrderFonction = "CEO";
var spreadOrderCompany = "My Company";

/* Champs personnalisables */
/* 7 et 8 correspondent aux id des champs personnalisables que vous trouvez dans votre backoffice, menu Paramétrage > Tracker */
var sbCustomFields = {custom_fields : {7 : "Professionnel", 8 : "Cosmétique"}}; 
/* Tags */
var add_tag = "tag1, tag2, tag3";
var del_tag = "tag4";

</script>
 

 

 

Pour retrouvez les identifiants de vos champs personnalisables, rendez-vous
Info
titleCustom_fields

Si vous souhaitez faire remonter des champs qui vous sont propres, vous pouvez utiliser les champs personnalisés. Après avoir créé vos champs personnalisés, vous retrouverez le script pré-rempli directement dans le paramétrage du tracker. (indiquez "Autre" dans la liste déroulante des solutions ecommerce pour le voir).

 

 

 

Anchor

Informations obligatoires

 

Les seules informations obligatoires sont :

  •  le «spreadOrderEmail» 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

Titre3_a
Titre3_a

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. 

Anchor
Titre_quatre
Titre_quatre

JAVASCRIPT 2 -  Remontée de commandes

Le traqueur de commande permet d’intégrer  

Ce javascript permet de remonter automatiquement les commandes et les informations clients dans la CRM de SPREAD (à chaque fois qu’un de vos clients passe une commande)Customer Family de SPREAD lorsqu'ils passent commande sur votre site.

 

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

 

 

 

Code Block
<script type="text/javascript"><script>
    	var siteid = "????????????????" ; /*à remplacer par votre clé d’API Publique*/ var sporder = {
            email: "johndoe@sb.am",
        var sbactionOrder = 1;			 amount: "13",
  var spreadOrderEmail = "john@doe.com" ; 		     var spreadOrderAmount = 13.30 ; 				idorder: "xxx",
          var spreadOrderFirstname =date: "Johnxxx", ; //* seulement si le nom et le prénom sont séparés*/Y-m-d H:i:s
          var spreadOrderName =state: "Doe10", ; 	//* «John10:taked Doe»/ si20:paid pas/ séparés50:sent */ 100:recieved
       var    spreadIdOrder =name: "1340doe",
;  /* ID de la commande */     var spreadOrderOptin = 1 ;firstname: "john",
        var spreadOrderState = 20 ; /* 10, 20, 50, 100, 0 */customer_cookie : "xxx",
         var ordertest = 0country ;: "xxx",
    var sbOrderNum = "F2013-9743"; /* 2ème numéro de facture possible */        birthday : "Y-m-d",
            /*gender Champs optionnels */
 : "xxx", // "male" or "female"
  var spreadOrderBirthday = "1975-12-25";      var spreadOrderGenderaddress =: "malexxx";,
 /* ou «female» */     var spreadOrderAddress = cp : "xxx"8,
rue    de la place";     var spreadOrderCpcity =: "76000xxx";,
    var spreadOrderCity = "Rouen";     vartel spreadOrderCountry: = "FRxxx";,
 /* pays au format ISO : FR, ES, IT, DE... */ mobile : "xxx",
 var spreadOrderTel = "0235000000";	     var spreadOrderMobile = "0690870089";
    var spreadOrderFonction = "CEO"; tel_optin : 1, // 0 or 1
      var spreadOrderCompany = "My Company";  mobile_optin : 1,  //* Champs0 personnalisablesor */1
    /* 7 et 8 correspondent aux id des champsfonction personnalisables que vous trouvez dans votre backoffice, menu Paramétrage > Tracker */
    var sbCustomFields = {custom_fields : {7 : "Professionnel", 8 : "Cosmétique"}};: "xxx",
            company : "xxx",
            action : "order",
      /* Tags */
    var add_tag =: ["tag1", "tag2", "tag3";
    var del_tag = "tag4";

</script>
Info

Pour retrouvez les identifiants de vos champs personnalisables, rendez-vous dans le paramétrage du tracker.

 

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 champs personnalisables, il est possible d’insérer des infos spécifiques dans la CRM SPREAD. Chacun de vos champs personnalisables possèdent un identifiant unique qui permet de les utiliser dans le tracker. Vous pouvez retrouver ces identifiants dans le paramétrage du tracker.

 

Exemple :

Code Block
languagejs
var sbCustomFields = {custom_fields : {390 : "Professionnel", 391 : "Boutique US"}};
 

Image Removed

 

 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 »

 Détail des  variables

 

VariablesDescriptionTypesiteid

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

chaîne

 facultatif si «publicKeySb» est définie

spreadOrderEmail 

Adresse email du client 

chaîne

 obligatoire 

spreadOrderAmount

Montant de la commande 

num

point en séparateur de décimal 

spreadOrderFirstname

Prénom du client 

chaîne 

spreadOrderName

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 

spreadIdOrder

Identifiant unique de commande 

chaîne, fortement conseillée

spreadOrderOptin

Le client accepte de recevoir votre newsletter 

boolean 1 ou 0 

spreadOrderState

Etat de la commande 

integer
10 : enregistrée 

 20 : payée 

 50 : expédiée 

 100 : reçue

0 : annulée 

ordertest 

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

boolean

1 ou 0

sbOrderNum 

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

varchar
VariablesDescriptionType
spreadOrderBirthdayDate d'anniversaire

date

("YYYY-MM-DD")

spreadOrderGenderSexe : female ou malechaîne
spreadOrderAddressAdressechaîne
spreadOrderCpCode Postalchaîne
spreadOrderCityVillechaîne
spreadOrderCountryPayschaîne
spreadOrderTelNuméro de téléphonechaîne
spreadOrderMobileNuméro de portablechaîne
spreadOrderFonction

Fonction occupée dans l'entreprise

(BtoB)

chaîne
spreadOrderCompany

Entreprise du client

(BtoB)

chaîne
add_tag

Possibilité de passer des informations liées au client

(Abonnement, etc...)

chaîne
del_tagPossibilité de supprimer un tag ajouté précédemmentchaî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
], // Indique un ou plusieurs tags sur la fiche du client
            del_tag : ["tag2", "tag4"], //Supprime un ou plusieurs tags sur la fiche du client
            custom_fields: {
				// Voir Custom_fields ci-dessous
            }
        };
</script>

HTML Comment
Code Block
<script type="text/javascript">

	var siteid = "????????????????" ; /*à remplacer par votre clé d’API Publique*/              
    var sbactionOrder = 1;			
    var spreadOrderEmail = "john@doe.com" ; 		
    var spreadOrderAmount = 13.30 ; 				
    var spreadOrderFirstname = "John" ; /* seulement si le nom et le prénom sont séparés*/
    var spreadOrderName = "Doe" ; 	/* «John Doe» si pas séparés */
    var spreadIdOrder = "1340" ;  /* ID de la commande */
    var spreadOrderOptin = 1 ; 
    var spreadOrderState = 20 ; /* 10, 20, 50, 100, 0 */
    var ordertest = 0 ;

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

    /* Champs optionnels */
    var spreadOrderBirthday = "1975-12-25"; 
    var spreadOrderGender = "male";  /* ou «female» */
    var spreadOrderAddress = "8, rue de la place";
    var spreadOrderCp = "76000";
    var spreadOrderCity = "Rouen";
    var spreadOrderCountry = "FR";  /* pays au format ISO : FR, ES, IT, DE... */
    var spreadOrderTel = "0235000000";	
    var spreadOrderMobile = "0690870089";
    var spreadOrderFonction = "CEO";
    var spreadOrderCompany = "My Company";

    /* Champs personnalisables */
    /* 7 et 8 correspondent aux id des champs personnalisables que vous trouvez dans votre backoffice, menu Paramétrage > Tracker */
    var sbCustomFields = {custom_fields : {7 : "Professionnel", 8 : "Cosmétique"}}; 

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

</script>

Info
titleCustom_fields

Si vous souhaitez faire remonter des champs qui vous sont propres, vous pouvez utiliser les champs personnalisés. Après avoir créé vos champs personnalisés, vous retrouverez le script pré-rempli directement dans le paramétrage du tracker (indiquez "Autre" dans la liste déroulante des solutions ecommerce pour le voir).

Anchor
Titre4_a
Titre4_a

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

Anchor
Titre4a_i
Titre4a_i

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).

Anchor
Titre4a_i
Titre4a_i

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ée
  •  20     :    payée
  •  50     :    expédiée
  •  100   :    reçue
  •  0       :    annulée

 Détail des  variables

 

VariablesDescriptionType
siteid

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

chaîne

 facultatif si «publicKeySb» est définie

spreadOrderEmail 

Adresse email du client 

chaîne

 obligatoire 

spreadOrderAmount

Montant de la commande 

num

point en séparateur de décimal 

spreadOrderFirstname

Prénom du client 

chaîne 

spreadOrderName

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 

spreadIdOrder

Identifiant unique de commande 

chaîne, fortement conseillée

spreadOrderOptin

Le client accepte de recevoir votre newsletter 

boolean 1 ou 0 



spreadOrderState



Etat de la commande 

integer
10 : enregistrée 

 20 : payée 

 50 : expédiée 

 100 : reçue

0 : annulée 

ordertest 

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

boolean

1 ou 0

sbOrderNum 

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

varchar
VariablesDescriptionType
spreadOrderBirthdayDate d'anniversaire

date

("YYYY-MM-DD")

spreadOrderGenderSexe : female ou malechaîne
spreadOrderAddressAdressechaîne
spreadOrderCpCode Postalchaîne
spreadOrderCityVillechaîne
spreadOrderCountryPayschaîne
spreadOrderTelNuméro de téléphonechaîne
spreadOrderMobileNuméro de portablechaîne
spreadOrderFonction

Fonction occupée dans l'entreprise

(BtoB)

chaîne
spreadOrderCompany

Entreprise du client

(BtoB)

chaîne
add_tag

Possibilité de passer des informations liées au client

(Abonnement, etc...)

chaîne
del_tagPossibilité de supprimer un tag ajouté précédemmentchaîne

 


 

Besoin de plus d'aide?

Column
width30%
Align
alignleft

 

Pour toutes questions et informations supplémentaires, n'hésitez pas à contacter notre support par email à support@spreadfamily.com

Column
width5%

 

Column
width30%
Align
alignright

 

Le support technique est aussi disponible dans votre backoffice en haut à droite dans «AIDE»

 

Column
width5%

 

Column
width30%
Align
aligncenter