Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
AnchorTitre_unTitre_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.

AnchorTitre_deuxTitre_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

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

AnchorTitre_troisTitre_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 sporder = { email: "johndoe@sb.am",

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

Détail des variables

VariablesDescriptionType
public_key

Clé API Publique Spread (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


Anchor
Titre2_a
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 sporder = {
            email: "johndoe@sb.am",
            name: "doe",
            firstname: "john",
            customer_cookie : "xxx",
            country : "xxx",
            birthday : "Y-m-d",
            gender : "xxx", // "male" or "female"
            address name: "doexxx",
            cp firstname: "johnxxx",
            customer_cookiecity : "xxx",
            countrytel : "xxx",
            birthdaymobile : "Y-m-dxxx",
            gendertel_optin : "xxx"1, // "male"0 or "female"1
            addressmobile_optin : "xxx",1, // 0 or 1
            cpfonction : "xxx",
            citycompany : "xxx",
            telaction : "xxxsignup",
            mobileadd_tag : ["tag1", "xxxtag2", "tag3"], // Indique un ou plusieurs tags sur la fiche du client
tel_optin : 1, // 0 or 1      del_tag : ["tag2", "tag4"], // Supprime un mobile_optinou :plusieurs 1,tags //sur 0la orfiche 1du client
           fonction custom_fields: "xxx",
   {
				// Voir Custom_fields ci-dessous
        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: {
				// 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>
 

 

 

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

 

 

 

AnchorTitre3_aTitre3_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. 
      </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>
     

     

     

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


    Détail des variables

    VariablesDescriptionType

    email 

    Adresse email du client 

    chaîne

     obligatoire 

    name

    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 

    firstname

    Prénom du client 

    chaîne 

    customer_cookieContient la valeur du cookie sbt s'il est présentchaîne
    countryPayschaîne
    birthdayAnniversaire

    date

    yyyy-mm-dd

    genderCivilité

    chaîne

    male ou female

    addressAdresse (Numéro et rue)chaîne
    cpCode postalchaîne
    cityVillechaîne
    telNuméro de téléphonechaîne
    mobileNuméro de téléphone mobilechaîne
    tel_optinLe numéro de téléphone est il disposé à recevoir des appels de votre part

    boolean

    1 ou 0

    mobile_optinLe numéro de téléphone mobile est il disposé à recevoir des sms de votre part

    boolean

    1 ou 0

    fonctionPoste dans l'entreprisechaîne
    companyNom de l'entreprisechaîne
    action

    "signup"

    Permet de détecter qu'il s'agit d'une création de compte dans le BackOffice 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


    Anchor
    Titre_quatre
    Titre_quatre

    JAVASCRIPT 3 -  Remontée de commandes

     

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

     

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

     

    Code Block
    themeEmacs
    titleJavascript 3 - Remontée des commandes
    <script>
            var sporder = {
                email: "johndoe@sb.am",
                amount: "13",
                idorder: "xxx",
                date: "xxx", // Y-m-d H:i:s
                state: "10", // 10:taked / 20:paid / 50:sent / 100:recieved
                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 : "order",
                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: {
    				// 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. 

    Détail des variables

    VariablesDescriptionType

    email 

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

    AnchorTitre4a_iTitre4a_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

     

     

    Info

    Dans la timeline du profil vous observerez le statut "annulée", mais le montant ne sera pas remonté dans le chiffre d'affaires.

     Détail des  variables

     

    spreadOrderState

    Etat de la commande 

    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 

    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îneAdresse email du client 

    chaîne

     obligatoire 

    amountMontant de la commande

    numérique

    obligatoire - Point en séparateur de décimale

    idorderRéférence de la commande

    chaîne

    obligatoire

    dateDate de la commande

    date

    obligatoire (yyyy-mm-dd hh:mm:ss)

    stateStatut 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 orderfirstname et mettre le nom ET le prénom dans ordername)

    chaîne 

    firstname

    Prénom du client 

    chaîne 

    customer_cookieContient la valeur du cookie sbt s'il est présentchaîne
    countryPayschaîne
    birthdayAnniversaire

    date

    yyyy-mm-dd

    genderCivilité

    chaîne

    male ou female

    addressAdresse (Numéro et rue)chaîne
    cpCode postalchaîne
    cityVillechaîne
    telNuméro de téléphonechaîne
    mobileNuméro de téléphone mobilechaîne
    tel_optinLe numéro de téléphone est il disposé à recevoir des appels de votre part

    boolean

    1 ou 0

    mobile_optinLe numéro de téléphone mobile est il disposé à recevoir des sms de votre part

    boolean

    1 ou 0

    fonctionPoste dans l'entreprisechaîne
    companyNom de l'entreprisechaî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 

    custom_fields 

    Champs personnalisés

    Multiple



    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

     

     

    Info

    Dans la timeline du profil vous observerez le statut "annulée", mais le montant ne sera pas remonté dans le chiffre d'affaires.

     


     

    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