Aller au contenu principal

Snippet Smart Push

Intégration

L'installation de la solution Smart Push sur le site du client s'effectue en intégrant un snippet de code javascript au sein de la page souhaitée.

JS

Intégrer le snippet Javascript juste avant la fermeture de la balise </body>. Le script Smart Tribune doit être chargé le plus en aval possible dans la chaîne de chargement des scripts afin d'éviter d'éventuels conflits avec les scripts présents sur la page client.

<script type="text/javascript">
window.addEventListener('STPUSHLoaded', function (e) {
var stPush = e.detail;
stPush.init({
analyticsUA: 'UA-00000000-0',
searchFiltered: true,
kbId: 2,
locale: 'fr',
cookieOptin: false,
filters: {
thematics: [],
tags: [],
},
});
});
</script>
<script
type="text/javascript"
async
src="https://assets.app.smart-tribune.com/smart-tribune/PUSH/push.main.js"
></script>

Lien vers la démonstration : Cliquez ici

L'intégration du snippet de code ci-dessus suffit à permettre l'affichage partiel de la Push au sein de la page. Il faut également communiquer votre nom de domaine à votre point de contact Smart Tribune pour que nous autorisions le produit à s'afficher complètement sur votre environnement.

Attention, le lien vers push.main.js est une démonstration du produit, le dossier smart-tribune dans l'url sera à remplacer par celui qui vous sera communiqué. L'url change complètement lors du passage de la pre-production (public) à la production.

info

Les domaines faisant appel à la base de connaissances spécifiée devront être préalablement déclarés directement dans la configuration de la base de connaissances dans Smart Dashboard.

Environnement de pré-production

attention

Le chemin d'accès au fichier push.js évolue en fonction de l'environnement : public ou production. Cette url diffère selon l'environnement sur lequel le dispositif doit être installé sur le site client. Il est d'usage d'utiliser PUBLIC pour la pré-production et d'utiliser PRODUCTION pour la production chez le client. Toutes ces informations sont communiquées par Smart Tribune après la phase de développement.

Script de PRODUCTION

<script
type="text/javascript"
async
src="https://assets.app.smart-tribune.com/smart-tribune/PUSH/push.main.js"
></script>

Script de PRE-PRODUCTION

<script
type="text/javascript"
async
src="https://assets.app.smart-tribune.com/smart-tribune/PUSH/public/push.main.js"
></script>

Liste des variables

VariableTypeConditionExempleDescription
kbIdintrequiskbId : 2Variable spécifique à chaque client, elle correspond à l'identifiant (identifiant système) de la base de connaissances à utiliser. Celle-ci est disponible dans Smart Dashboard, l'interface d'administration de contenus. La base de connaissances intégrant déjà du contenu de test est identifié par la valeur : 2. Vous pouvez retrouver votre kbId sur la page d'accueil du Dashboard dans le cadre "Sélectionner une base de connaissances" puis "identifiant système"
localestringrequislocale : "fr"Elle permet au client de spécifier dans quelle langue le dispositif doit être affiché. Cela est valable uniquement pour les bases de connaissances multilingues.
buildNamestringoptionnelbuildName : "design-2"Cette variable est très pratique si vous avez une PUSH qui doit changer de couleur (par exemple) entre un espace public et un espace membre. Si cela est nécessaire à votre produit Smart Tribune, la valeur de la variable vous sera communiquée après la phase de développement.
cookieOptinboolrequiscookieOptin : falseElle permet d'empêcher ou non l'activation du cookie d'analyse des statistiques (valeur possible : true ou false). En désactivant cette fonctionnalité, il ne sera plus possible d'envoyer des informations dans le fournisseur d'analyse des statistiques pour Smart Push. La valeur par défaut est false.
analyticsConnectorstringoptionnelanalyticsConnector : "google"Elle permet de spécifier le fournisseur d'analyse de statistiques que vous souhaitez utiliser pour envoyer les statistiques d'utilisation de Smart Push (connecteurs disponibles : 'google' et 'atinternet'). La valeur par défaut est 'google'.
analyticsUAstringoptionnelanalyticsUA : "UA-XXXXXXXX"Cette variable permet d'envoyer différentes informations relatives à l'activité de vos visiteurs. Compatible avec Google Analytics V4 ("G-XXXXXXXX") et ATInternet ("siteId").
analyticsConfigurationobjoptionnelanalyticsConfiguration : { collectDomain: "exemple.com" }Cette variable de configuration vous permet d'envoyer une configuration spécifique au fournisseur d'analyse de statistiques (requis avec le connecteur "atinternet"). Consultez cette section pour en savoir sur les variables supportées.
searchFilteredbool/objoptionnelsearchFiltered : trueCette variable permet de contextualiser la recherche. La valeur par défaut est true afin que le moteur de recherche renvoie uniquement des résultats dans le contexte choisi dans la variable filters. La valeur false permet de rendre accessible tous les contenus de la base de connaissances dans le moteur de recherche. Attention le contenu accessible reste conditionné par le scope de la solution (FAQ, PUSH...). Pour contextualiser la recherche sur une sélection différente de la variable filters, il est possible d'ajouter un tableau de chaîne de caractères (identifiant système du tag) pour spécifier le nouveau contexte de recherche (searchFiltered : {tags: ["TAG"]}).
customVariablesobjoptionnelcustomVariables : { brand:"Smart Tribune"}Cette variable permet de remplacer la valeur d'un jeton de personnalisation créé dans le contenu d'une réponse via Smart Dashboard. Note : On attend ici une chaîne de caractères qui peut contenir des balises HTML (span, a, b, u, i, br, img) avec ses attributs (id, class, style, name, title, target, href, rel, src, alt).
filtersobjoptionnelfilters : { thematics:[], tags:[] }Cette variable de configuration permet de spécifier la contextualisation à appliquer. Il est possible de définir le filtrage en utilisant l'identifiant système thematics ou tags. L'opérateur utilisé est AND dans le cas de multiples valeurs au sein du même filtre ou entre les filtres. Il est possible de remplacer tags par tagsOr pour appliquer un opérateur OR entre chaque tag. Note : Ces objets contiennent un tableau (array) de chaîne de caractères (string).
entrypointobjoptionnelentrypoint : { type: "question", value: "question-slug" }Cette variable de configuration permet d'afficher au chargement de Smart Push, une question ou les questions d'une catégorie. Pour cela il faut choisir le type (‘question' ou ‘thematic') et insérer dans ‘value' le slug de la question ou de la catégorie.
customResponsesarroptionnelcustomResponses : [ "tag" ]Cette variable permet de spécifier la contextualisation de la réponse personnalisée à appliquer en utilisant l'identifiant système des tags. Note : Cette variable est un tableau (array) de chaîne de caractères (string).
info

Slug : C'est l'identifiant au format "chaîne de caractères" d'une question et d'une catégorie. Celui de la catégorie est trouvable dans Smart Dashboard (‘Menu' > ‘Base de connaissances' > ‘Catégories' > ‘identifiant système'). Celui de la question est disponible directement depuis la FAQ dans l'url (example.com/faq?question=SLUG).

Analytics Configuration

En fonction du connecteur utilisé, vous pouvez spécifier une configuration optionnelle au fournisseur d'analyse de statistiques en passant un objet dans analyticsConfiguration.

Configuration ATInternet

PropriétéTypeDescription
collectDomainstringDomaine de collecte des statistiques. Vous pouvez retrouver cette information sur votre tableau de bord ATInternet. (En savoir plus)
addEventURLstringAjoute automatiquement une propriété page_url à tous les évènements, contenant l'URL de la page courante. Valeurs possibles : false, withoutQS, true (par défaut).

Configuration Google Analytics

PropriétéTypeDescription
transportUrlstringEnvoie les données à un conteneur côté serveur.
firstPartyCollectionboolDoit être configuré sur true lorsque transportUrl est spécifié.

Les fonctions optionnelles

Utilisation la fonction show()

La fonction show() va vous permettre d'ouvrir la box.

Depuis un...Description
boutonAppelez simplement la fonction show() sur votre bouton.
<button onclick="detail.show()">Btn</button>
Depuis un...Description
timerPlacez un setTimeout dans une balise <script> après initialisation de Smart Push.
<script type="text/javascript">
window.addEventListener('STPUSHLoaded', function (e) {
var stPush = e.detail;
stPush.init({
analyticsUA: 'UA-00000000-0',
searchFiltered: true,
kbId: 2,
locale: 'fr',
cookieOptin: false,
filters: {
thematics: [],
tags: [],
},
});
setTimeout(() => {
stPush.show();
}, 3000);
});
</script>
<script
type="text/javascript"
async
src="https://assets.app.smart-tribune.com/smart-tribune/PUSH/push.main.js"
></script>
Depuis un...Description
scrollPlacez un écouteur après initialisation de Smart Push.
<script type="text/javascript">
window.addEventListener('STPUSHLoaded', function (e) {
var stPush = e.detail;
stPush.init({
analyticsUA: 'UA-00000000-0',
searchFiltered: true,
kbId: 2,
locale: 'fr',
cookieOptin: false,
filters: {
thematics: [],
tags: [],
},
});
window.addEventListener(
'scroll',
function (e) {
stPush.show();
},
false,
);
});
</script>
<script
type="text/javascript"
async
src="https://assets.app.smart-tribune.com/smart-tribune/PUSH/push.main.js"
></script>

Si vous avez besoin d'utiliser ces fonctions en dehors du script (sur un bouton par exemple), vous aurez besoin de stocker stPush à l'interieur de window qui est une variable globale :

<script type="text/javascript">
window.addEventListener('STPUSHLoaded', function (e) {
window.stPush = e.detail;
window.stPush.init({
analyticsUA: 'UA-00000000-0',
searchFiltered: true,
kbId: 2,
locale: 'fr',
cookieOptin: false,
filters: {
thematics: [],
tags: [],
},
});
});
</script>
<script
type="text/javascript"
async
src="https://assets.app.smart-tribune.com/smart-tribune/PUSH/push.main.js"
></script>

Utilisation de la fonction hide()

La fonction hide() va vous permettre de fermer la box.

Depuis un...Description
buttonAppelez simplement la fonction hide() sur votre bouton.
<button onclick="window.stPush.hide()">Btn</button>

Utilisation de la fonction off()

La fonction off() va vous permettre de faire disparaitre la box de la page.

Depuis un...Description
buttonAppelez simplement la fonction off() sur votre bouton.
<button onclick="window.stPush.off()">Btn</button>

Utilisation de la fonction on()

La fonction on() va vous permettre de faire apparaitre la box sur la page.

Depuis un...Description
boutonAppelez simplement la fonction on() sur votre bouton.
<button onclick="window.stPush.on()">Btn</button>

Scripts tiers

attention

Dans certains cas, vous devrez autoriser des domaines de tierces partie car nous utilisons des scripts externes à Smart Tribune pour les fonctionnalités décrites ci-dessous.

Polyfill-fastly.io

Polyfill-fastly.io est un service développé par The Financial Times qui permet de fournir des fonctionnalités non-supportées sur certains navigateurs. Ce service est utilisé pour assurer la compatibilité avec tous les navigateurs jusqu'à IE 11.

VersionURL du ScriptDomaine à autoriser
V3https://polyfill-fastly.io/v3/polyfill.min.jspolyfill-fastly.io

Google Analytics

Google Analytics est un outil d’analyse développé par Google qui permet de mesurer le trafic d'un site web et de recueillir des informations essentielles sur les visiteurs de ce dernier.

VersionURL du ScriptDomaine à autoriser
V3https://www.google-analytics.com/analytics.jsgoogle-analytics.com
V4https://www.googletagmanager.com/gtag/jsgoogletagmanager.com

ATInternet

ATInternet est une entreprise française spécialisée dans la mesure d'audience et de performance de sites web, mobiles, d'applications et des réseaux sociaux.

VersionURL du ScriptDomaine à autoriser
V6https://tag.aticdn.net/piano-analytics.jstag.aticdn.net