Info | ||
---|---|---|
| ||
|
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.
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 - Widgets
Ce code 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 | ||||||
---|---|---|---|---|---|---|
| ||||||
<script type="text/javascript">
var spconfig = {
public_key: "*****************************",
debug: false,
set_cookie: true,
track_order_enabled: true
};
/*Script d'execution*/
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);
</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 | ||
---|---|---|
| ||
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
Clé API Publique Spread (Paramètrage > Tracker)
chaîne
obligatoire
boolean
true ou false
"True", permet d'attribuer le cookie aux clients
Important pour le parrainage et les widgets sur segment par exemple
boolean
true ou false
boolean
true ou false
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, en plus du tag sur toutes les pages et avant le script d'exécution.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<script>
var sporder = {
email: "johndoe@sb.am",
name: "doe",
firstname: "john",
optin: 1, //1:optin / 0:not optin / -1: unknown
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: {
// 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 | ||
---|---|---|
| ||
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 > Exemples de codes. |
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
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
Prénom du client
chaîne
date
yyyy-mm-dd
chaîne
male ou female
boolean
1 ou 0
boolean
1 ou 0
"signup"
Permet de détecter qu'il s'agit d'une création de compte dans le BackOffice SPREAD
chaîne
obligatoire
Indique un ou plusieurs tag dans la fiche du client
chaîne
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, en plus du tag sur toutes les pages et avant le script d'exécution.
Code Block | ||||
---|---|---|---|---|
| ||||
<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",
optin: 1, //1:optin / 0:not optin / -1: unknown
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
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> |
Info | ||
---|---|---|
| ||
|
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.
Warning | ||
---|---|---|
| ||
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.
|
JAVASCRIPT 1 - Widgets
Ce code 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 | ||||||
---|---|---|---|---|---|---|
| ||||||
<script>
var spconfig = {
public_key: "PUBLIC_KEY", // À remplacer par la clé d'API publique dans votre back office, menu "Paramétrage > Tracker" en bas de page
debug: false,
set_cookie: true,
track_order_enabled: true
};
// Script d'exécution
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);
</script> |
Warning | ||
---|---|---|
| ||
Sinon, 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 (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 |
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, en plus du tag sur toutes les pages et avant le script d'exécution.
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
Info | ||
---|---|---|
| ||
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 > Exemples de codes. |
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 |
---|---|---|
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_cookie | Contient la valeur du cookie sbt s'il est présent | chaîne |
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 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 |
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, en plus du tag sur toutes les pages et avant le script d'exécution.
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
Info | ||
---|---|---|
| ||
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 > Exemples de codes. |
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 |
---|---|---|
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 orderfirstname et mettre le nom ET le prénom dans ordername) | chaîne |
firstname | Prénom du client | chaîne |
customer_cookie | Contient la valeur du cookie sbt s'il est présent | chaîne |
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 |
custom_fields | Champs personnalisés | Multiple |
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 (variable "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
Note | ||
---|---|---|
| ||
Le montant des commandes au statut Annulé ne sera pas remonté dans le chiffre d'affaires (CA) du profil. |
Spécificités des différents gestionnaires de tags
Eulerian
Pour le cas d'Eulerian, vous pouvez suivre les instructions ci-dessus mais deux étapes supplémentaires sont nécessaires :
- Remplacer "var spconfig" et "var sporder" par "window.spconfig" et "window.sporder"
- Lorsque vous utilisez le gestionnaire de tag Eulerian, vous pouvez intégrer vos scripts dans une iFrame Eulerian sur votre site. SPREAD n'est pas compatible avec une iFrame. Eulerian vous propose une option permettant de ne pas intégrer vos scripts dans une iFrame.
Warning | ||
---|---|---|
| ||
Vous pouvez vérifier si le script est mis en iFrame. Dans Eulerian, RDV dans le Tag Management System (TMS). Vous y trouverez le Recettage TMS à activer, cela vous redirige sur votre site avec une popup en bas Eulerian Tech. Dépliez cette pop-up pour obtenir la liste des tags appelés en iFrame. Si vous avez bien réalisé la manipulation, vous ne devez pas y trouver SPREAD. |
Note | ||
---|---|---|
| ||
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 |