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',
      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

Variable	Type	Condition	Exemple	Description
kbId	int	requis	kbId: 2	Variable 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"
locale	string	requis	locale: "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.
buildName	string	optionnel	buildName: "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.
cookieOptin	bool	requis	cookieOptin: false	Elle 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.
analyticsConnector	string	optionnel	analyticsConnector: "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'.
analyticsUA	string	optionnel	analyticsUA: "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").
analyticsConfiguration	obj	optionnel	analyticsConfiguration: { 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.
searchFiltered Déprécié	bool/obj	optionnel	searchFiltered: true	Cette 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"]}). Note : Cette variable est dépréciée. Utilisez searchSettings.filters à la place.
customVariables	obj	optionnel	customVariables: { 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).
filters	obj	optionnel	filters: { thematics: [], tags: [], tagsOr: [] }	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).
entrypoint	obj	optionnel	entrypoint: { type: "question", value: "question-slug" }	Cette variable de configuration permet d'afficher au chargement de Smart Push, une question, un guide, ou les questions d'une catégorie. Pour cela il faut choisir le type (‘question', 'guide', ou ‘thematic') et insérer dans ‘value' le slug de la question, du guide, ou de la catégorie.
customResponses	arr	optionnel	customResponses: ["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).
searchSettings	obj	optionnel	searchSettings: { filters: { thematics: [], tags: [], tagsOr: [] } }	Cette variable de configuration contient tous les paramètres pour configurer votre moteur de recherche. Consultez cette section pour en savoir plus sur les propriétés supportées.

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

Search Settings

Variable	Type	Condition	Exemple	Description
filters	obj	optionnel	filters: { thematics: [], tags: [], tagsOr: [] }	Cette variable de configuration permet de spécifier la contextualisation à appliquer au moteur de recherche uniquement. 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).
strictness	string	optionnel	strictness: "strict"	Cette variable permet de contrôler la sensibilité de la recherche au sein de l'application. En ajustant ce paramètre, vous pouvez modifier le seuil des résultats de recherche pour qu'ils soient soit stricts, soit plus tolérants, selon vos besoins. strict : La recherche retournera des résultats qui correspondent étroitement aux critères de recherche, en filtrant les résultats moins pertinents. Ceci est utile lorsque des résultats précis sont nécessaires. normal (par défaut) : la recherche sera plus tolérante, retournant une gamme plus large de résultats qui peuvent inclure plus de variations et de correspondances partielles. Cela peut être utile lorsqu'un ensemble de résultats plus complet est préféré.

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é	Type	Description
collectDomain	string	Domaine de collecte des statistiques. Vous pouvez retrouver cette information sur votre tableau de bord ATInternet. (En savoir plus)
addEventURL	string	Ajoute 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é	Type	Description
transportUrl	string	Envoie les données à un conteneur côté serveur.
firstPartyCollection	bool	Doit ê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
bouton	Appelez simplement la fonction show() sur votre bouton.

<button onclick="detail.show()">Btn</button>

Depuis un...	Description
timer	Placez 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
scroll	Placez 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
button	Appelez 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
button	Appelez 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
bouton	Appelez 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.

Version	URL du Script	Domaine à autoriser
V3	https://polyfill-fastly.io/v3/polyfill.min.js	polyfill-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.

Version	URL du Script	Domaine à autoriser
V3	https://www.google-analytics.com/analytics.js	google-analytics.com
V4	https://www.googletagmanager.com/gtag/js	googletagmanager.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.

Version	URL du Script	Domaine à autoriser
V6	https://tag.aticdn.net/piano-analytics.js	tag.aticdn.net