Passer au contenu principal

Intégration BigCommerce : Extraits Stencil

Apprenez à ajouter de nouveaux extraits Stencil à votre boutique BigCommerce

Écrit par Paulius

Les extraits Omnisend connectent votre boutique BigCommerce Stencil à Omnisend, permettant des fonctionnalités telles que la récupération de panier, le suivi des ventes, des formulaires d'inscription, le product picker, et plus encore. Omnisend ajoute automatiquement ces extraits pour les nouveaux magasins BigCommerce. Si vous utilisez une version plus ancienne de la boutique ou un thème Stencil personnalisé, vous devrez les ajouter manuellement en utilisant le Gestionnaire de Scripts de BigCommerce.

Cet article montre comment ajouter manuellement des extraits Stencil pour compléter votre intégration BigCommerce.

Utilisez-vous un thème Blueprint ? Suivez le Guide des extraits de BigCommerce Blueprint à la place.


Avant de commencer

  • Avant d'ajouter des extraits, vous devez connectez votre boutique BigCommerce à Omnisend

  • Utilisez uniquement un type d'extrait à la fois : Stencil ou Blueprint. Mélanger les deux cassera la fonctionnalité. Si vous n'êtes pas sûr du thème que vous utilisez, consultez le guide de BigCommerce

  • Lorsque vous changez de thème, vous devez réajouter les extraits. Les changements de thème suppriment le code existant.

  • Les extraits sont ajoutés automatiquement pour les nouveaux magasins BigCommerce. Si vous voyez un message d'erreur comme celui ci-dessous, suivez les étapes d'installation manuelle dans ce guide.

Ajout des extraits

Étape 1. Trouvez l'ID de votre boutique

Pour activer les scripts de suivi, vous devez remplacer XXXXX par votre identifiant de boutique réel. Sans cela, le code ne fonctionnera pas.

Vous pouvez localiser votre shop ID dans la barre d'adresse tout en étant connecté à votre panneau de contrôle BigCommerce. Si vous avez besoin d'aide pour le trouver, consultez le guide de BigCommerce.

Hash de la boutique dans la barre d'adresse

⚠️ Critique : Remplacez XXXXX par votre identifiant de boutique dans les trois scripts avant de télécharger.

Étape 2. Téléchargez des scripts dans le gestionnaire de scripts BigCommerce

Ensuite, téléchargez trois scripts sur votre boutique en utilisant le gestionnaire de scripts de BigCommerce. Allez dans Storefront Script Manager dans votre panneau d'administration BigCommerce.

⚠️ Avant de télécharger, appliquez ces paramètres à chaque script :

  • Placement : Pied de page

  • Catégorie de script : Essentiel

  • Type de script : Script

Vous répéterez ces étapes trois fois, en collant différents contenus de script et en sélectionnant le Lieu correct pour chacun.

Script 1 : Script Omnisend

Ce script suit le comportement des visiteurs et permet les formulaires d'inscription, la récupération de panier et le product picker sur vos pages de vitrine.

  • Nom : script Omnisend

  • Lieu : Pages de la vitrine

Collez le script suivant :

<script type="text/javascript">
// SOUNDEST-V6-SM
window.SOUNDEST = window.SOUNDEST || {};
// Do not forget to replace XXXXXX with your shop ID! You can find it in your shop's permanent address: https://store-XXXXXX.mybigcommerce.com/. How to find it: https://goo.gl/1XddvQ
SOUNDEST.shopID = "XXXXXX";
SOUNDEST.shopType = "bigcommerce";
SOUNDEST.baseURL = "https://omnisnippet1.com/";
SOUNDEST.jsFile = "bigcommerce-launcher.js";
SOUNDEST.version = new Date().toISOString().slice(0, 13);
SOUNDEST.pageType = "{{page_type}}";
SOUNDEST.productTitle = "{{product.title}}";
SOUNDEST.productID = "{{product.id}}";
SOUNDEST.categoryTitle = "{{category.name}}";
SOUNDEST.categoryID = "{{category.id}}";
SOUNDEST.token = "{{settings.storefront_api.token}}";
!(function (baseURL, version) {
for (
var t = document.getElementsByTagName("script"), o = !1, s = 0;
s < t.length;
s++
)
"string" == typeof t[s].src &&
0 < t[s].src.indexOf(SOUNDEST.jsFile) &&
(o = !0);
if (!o) {
var i = document.createElement("script");
(i.type = "text/javascript"),
(i.async = !0),
(i.src = baseURL + "inshop/" + SOUNDEST.jsFile + "?v=" + version);
var r = document.getElementsByTagName("script")[0];
r.parentNode.insertBefore(i, r);
}
})(SOUNDEST.baseURL, SOUNDEST.version);
</script>

Script 2 : Script de suivi des ventes Omnisend

Ce script suit les commandes complètes et envoie les données de vente à Omnisend pour l'analyse des performances de la campagne et de l'automatisation.

  • Nom : script de suivi des ventes Omnisend

  • Emplacement: Confirmation de commande

Collez le script suivant :

<script type="text/javascript">
// SOUNDEST-V6-SM
window.SOUNDEST = window.SOUNDEST || {};
// Do not forget to replace XXXXXX with your shop ID! You can find it in your shop's permanent address: https://store-XXXXXX.mybigcommerce.com/. How to find it: https://goo.gl/1XddvQ
SOUNDEST.shopID = "XXXXXX";
SOUNDEST.shopType = "bigcommerce";
SOUNDEST.baseURL = "https://omnisnippet1.com/";
SOUNDEST.jsFile = "bigcommerce-launcher.js";
SOUNDEST.version = new Date().toISOString().slice(0, 13);
SOUNDEST.pageType = "{{page_type}}";
SOUNDEST.productTitle = "{{product.title}}";
SOUNDEST.productID = "{{product.id}}";
SOUNDEST.categoryTitle = "{{category.name}}";
SOUNDEST.categoryID = "{{category.id}}";
SOUNDEST.token = "{{settings.storefront_api.token}}";
!(function (baseURL, version) {
for (
var t = document.getElementsByTagName("script"), o = !1, s = 0;
s < t.length;
s++
)
"string" == typeof t[s].src &&
0 < t[s].src.indexOf(SOUNDEST.jsFile) &&
(o = !0);
if (!o) {
var i = document.createElement("script");
(i.type = "text/javascript"),
(i.async = !0),
(i.src = baseURL + "inshop/" + SOUNDEST.jsFile + "?v=" + version);
var r = document.getElementsByTagName("script")[0];
r.parentNode.insertBefore(i, r);
}
})(SOUNDEST.baseURL, SOUNDEST.version);
</script>

💡 Ce script utilise le même code que Script 1.

Script 3 : Script de suivi de paiement Omnisend

Ce script suit le comportement de paiement pour améliorer l'exactitude de l'abandon de panier.

  • Nom : script de suivi de paiement Omnisend

  • Emplacement : Paiement

Collez le script suivant :

<script type="text/javascript">
// SOUNDEST-V6-SM
window.SOUNDEST = window.SOUNDEST || {};
// Do not forget to replace XXXXXX with your shop ID! You can find it in your shop's permanent address: https://store-XXXXXX.mybigcommerce.com/. How to find it: https://goo.gl/1XddvQ
SOUNDEST.shopID = "XXXXXX";
SOUNDEST.shopType = "bigcommerce";
SOUNDEST.baseURL = "https://omnisnippet1.com/";
SOUNDEST.jsFile = "bigcommerce-checkout-launcher.js";
SOUNDEST.version = new Date().toISOString().slice(0, 13);
SOUNDEST.pageType = "{{page_type}}";
SOUNDEST.productTitle = "{{product.title}}";
SOUNDEST.productID = "{{product.id}}";
SOUNDEST.categoryTitle = "{{category.name}}";
SOUNDEST.categoryID = "{{category.id}}";
SOUNDEST.token = "{{settings.storefront_api.token}}";
!(function (baseURL, version) {
for (
var t = document.getElementsByTagName("script"), o = !1, s = 0;
s < t.length;
s++
)
"string" == typeof t[s].src &&
0 < t[s].src.indexOf(SOUNDEST.jsFile) &&
(o = !0);
if (!o) {
var i = document.createElement("script");
(i.type = "text/javascript"),
(i.async = !0),
(i.src = baseURL + "inshop/" + SOUNDEST.jsFile + "?v=" + version);
var r = document.getElementsByTagName("script")[0];
r.parentNode.insertBefore(i, r);
}
})(SOUNDEST.baseURL, SOUNDEST.version);
</script>

Remarque : Ce script utilise un nom de fichier différent (bigcommerce-checkout-launcher.js) que les Scripts 1 et 2.

Une fois tous les scripts ajoutés et enregistrés, votre boutique BigCommerce sera entièrement connectée au suivi Omnisend.

Synchronisation des contacts

Tous les contacts ajoutés ou mis à jour via BigCommerce seront automatiquement ajoutés à votre Audience Omnisend → liste Contacts. Ces contacts recevront également le tag "source: bigcommerce".

Cela vous permet de filtrer et de segmenter facilement les contacts synchronisés depuis BigCommerce. Vous pouvez créer un segment basé sur Tag is source:bigcommerce. En savoir plus sur la Segmentation dans Omnisend.

Foire aux questions

Pourquoi les extraits ne se sont-ils pas installés automatiquement après avoir connecté ma boutique ?
L'installation automatique des extraits fonctionne pour la plupart des nouveaux magasins BigCommerce, mais certains anciens magasins ou thèmes Stencil personnalisés nécessitent une installation manuelle. Après avoir connecté votre boutique, vérifiez le Gestionnaire de Scripts dans les 10 minutes. Si aucun script Omnisend n'apparaît, suivez les étapes d'installation manuelle dans ce guide.

Comment vérifier si les extraits Omnisend sont déjà installés ?
Allez dans BigCommerce → Storefront → Script Manager. Recherchez trois scripts Omnisend : "script Omnisend" (Pages de la vitrine), "Script de suivi des ventes Omnisend" (Confirmation de commande), et "Script de suivi de paiement Omnisend" (Paiement). Si les trois apparaissent, les extraits sont installés.

J'ai ajouté des extraits manuellement, mais les formulaires et le product picker ne fonctionnent pas. Pourquoi ?
You likely have duplicate snippets (automatic + manual).Allez dans BigCommerce → Storefront → Script Manager. Si des scripts Omnisend y sont listés, supprimez tous les extraits que vous avez ajoutés manuellement aux fichiers de pied de page ou d'en-tête de votre thème. Conservez uniquement les scripts dans le Gestionnaire de scripts. Les extraits en double cassent la fonctionnalité.

Puis-je utiliser à la fois des extraits Blueprint et Stencil ?
Non. Utiliser les deux cassera la fonctionnalité. Utilisez uniquement un type d'extrait basé sur votre thème. Si vous passez de Blueprint à Stencil (ou vice versa), supprimez d'abord les anciens extraits, puis ajoutez les bons.

J'ai mis à jour/changé mon thème BigCommerce, et maintenant les formulaires ne fonctionnent pas. Que s'est-il passé ?

Les mises à jour ou changements de thème suppriment les scripts existants de BigCommerce. Allez dans BigCommerceStorefrontScript Manager et vérifiez si les trois scripts Omnisend sont toujours là. S'ils sont manquants, suivez les étapes d'installation manuelle énumérées ci-dessus.

Je vois "XXXXXX" dans le code du script. Que dois-je faire ?
Remplacez XXXXXX avec votre véritable BigCommerce shop ID dans tous les scripts. Trouvez votre shop ID dans l'URL de votre panneau d'administration BigCommerce : https://store-XXXXXX.mybigcommerce.com/. Par exemple, si votre URL est https://store-abc123.mybigcommerce.com/, replace XXXXXX par abc123 dans chaque script avant de sauvegarder.

La récupération du panier ne fonctionne pas. Pourrait-il s'agir d'un problème de snippet ?

Oui. La récupération du panier nécessite que les trois scripts fonctionnent correctement. Vérifiez BigCommerce Storefront Script Manager et confirmez :

  • Le script Omnisend est configuré pour Pages de vitrine (suit les ajouts au panier).

  • Le script de suivi des ventes Omnisend est configuré pour Confirmation de commande (suit les commandes complétées).

  • Le script de suivi de paiement Omnisend est configuré pour Paiement (suit l'abandon de paiement).

Si un script est manquant ou défini à un mauvais emplacement, la récupération du panier ne se déclenchera pas.


Vous voulez parler au support ? Utilisez le chat dans l'application ou envoyez vos questions à [email protected].

Avez-vous trouvé la réponse à votre question ?