Versions Compared

Key

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

Menu

A quoi


Warning

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

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 remonter les créations de compte dans SPREAD (JavaScript 2),
  •  de remonter les commandes dans 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, dans le footer 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.


Cliquez ici pour accéder aux exemples de code et intégrez le code

languagejs
themeEmacs
titleJavaScript 1 - Affichage des widgets
linenumberstrue
 <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

VariablesDescriptionTypepublic_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

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

Code Block
languagejs
themeEmacs
titleJavaScript 2 - Remontée des créations de compte
linenumberstrue
<script>
        var sporder = {
            email: "johndoe@sb.am",
            name: "doe", //Si vous n'indiquez pas ce paramètre nous y insérerons le début de l'email, dans notre exemple vous y trouveriez donc "johndoe".
            firstname: "john",
			optin: 1, //1:optin / 0:not optin / -1: unknown
            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: {
				// 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). et cliquez tout en bas sur le bouton "exemple de code".Image Removed Voici ci-dessous un exemple de résultat:

Image Removed

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. 

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 firstname et mettre le nom ET le prénom dans name)

chaîne 

firstname

Prénom du client 

chaîne 

optinEtat de l'abonnement à la newsletter

boolean

1 ou 0 (ou -1)

countryPayschaînebirthdayAnniversaire

date

yyyy-mm-dd

genderCivilité

chaîne

male ou female

addressAdresse (Numéro et rue)chaînecpCode postalchaînecityVillechaînetelNuméro de téléphonechaînemobileNuméro de téléphone mobilechaînetel_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înecompanyNom de l'entreprisechaîneaction

"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

AnchorTitre_quatreTitre_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 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"

Code Block
languagejs
themeEmacs
titleJavaScript 3 - Remontée des commandes
linenumberstrue
<script>
        var sporder = {
            email: "johndoe@sb.am",
            amount: "13",
            idorder: "xxx",
            date: "xxx", // Y-m-d H:i:s
            state: "10", // 10:taken / 20:paid / 50:sent / 100:recieved
            name: "doe", //Si vous n'indiquez pas ce paramètre nous y insérerons le début de l'email, dans notre exemple vous y trouveriez donc "johndoe".
            firstname: "john",
			optin: 1, //1:optin / 0:not optin / -1: unknown
            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
			add_order_tag: ["tag1", "tag2", "tag3"], //Il est possible de mettre un ou plusieurs tags sur les commandes
    		//del_order_tag: ["tag2", "tag3"], //Supprime un ou plusieurs tags d'une commande
            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>

JAVASCRIPT avec les commentaires suivants :

  • // Configuration du tracker SPREAD
  • // Procédure de chargement du tracker JS SPREAD
  • // Appel du chargement du tracker JS SPREAD

Dans ce script, modifiez <PUBLIC_KEY> par votre clé d'API publique que vous trouverez dans votre back office (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 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 en dessous du commentaire suivant :

// -------------------------- PROFIL ---------------------------


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). et cliquez tout en bas sur le bouton "exemple de code".Image Added Voici ci-dessous un exemple de résultat:


Image Added


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 firstname et mettre le nom ET le prénom dans name)

chaîne 

firstname

Prénom du client 

chaîne 

optinEtat de l'abonnement à la newsletter

boolean

1 ou 0 (ou -1)

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 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 en dessous du commentaire suivant :

// -------------------------- COMMANDE --------------------------


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 Paramétrage > tracker > Exemple de codes.

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

Adresse 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 UTC)

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 firstname et mettre le nom ET le prénom dans name)

chaîne 

firstname

Prénom du client 

chaîne 

optinEtat de l'abonnement à la newsletter

boolean

1 ou 0

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 

add_order_tagIndique un ou plusieurs tag sur les commandeschaîne
del_order_tagSupprime un ou plusieurs tag sur les commandeschaîne

custom_fields

Champs personnalisés

Multiple


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


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.




Note
titleRemarque

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