Guide d'intégration des tags et du flux dans 3D Cart

Présentation

Ce guide explique comment générer un flux produit et installer le Criteo OneTag sur votre site 3D Cart.

Comment générer un flux produit

3D Cart a une structure arborescente. Par conséquent, nous vous recommandons d'utiliser le product ID interne de 3D Cart plutôt qu'un product ID généré ailleurs. Suivez tout simplement ces six étapes pour générer un flux produit :

Étape 1 : Exportation/importation

Étape 2 : Allez à Produits > Gérer

Étape 3 : Créez un nouvel export en cliquant sur « Ajouter »  

Étape 4 : Remplissez les champs en utilisant les spécifications de flux produit Criteo.
Voici les titres de colonnes par défaut. Si nécessaire, vous pouvez ajouter des colonnes supplémentaires à l'export :

• name (alias: title)
• url_link (alias: link)
• image1/thumbnail (alias: image_link) REMARQUE : n'oubliez pas d'insérer l'URL de la page d'accueil du site en tant que "Prefix".
• description (alias: description)
• price (alias: price)
• catalogid (alias: id)
• saleprice (alias: sale_price)
• instock_message (alias: availability)
• categories (alias: product_type)
• constant for static value (facultatif)

Étape 5 : Planifiez votre export.

Allez à Products > Choisissez votre export sous Custom Export Sets > Schedule

Étape 6 : Lien général de fluxhttp://www.domaine.com/assets/exports/nom_fichier.csv

Sous Exports programmés, cochez la case Activer, puis saisissez le nom du fichier. Sous Action, sélectionnez le premier choix, Sauvegarder.

Comment installer le Criteo OneTag

Vous devez tout d'abord accéder au thème du site Web. Allez à Settings > Design > Themes & Styles. Ensuite, cliquez sur Edit Template (HTML).

Les modèles individuels sont les suivants :

• Page d'accueil : home.html
• Pages de listing : category_0.html. Vous pouvez avoir plusieurs modèles pour les pages de catégorie.
• Pages produit : listing_0.html. Vous pouvez avoir plusieurs modèles pour les pages produit.
• Pages produit (aperçu rapide) : quickview.html
• Pages panier : view_cart.html
• Pages panier (fenêtre d'aperçu rapide) : view_cart_quick.html
• Page de confirmation de commande : checkout-step4.html s'il s'agit d'un système de confirmation à 4 étapes.

Si vous combinez tous les tags dans une seule instruction conditionnelle, vous pouvez ajouter votre script à frame.html.

Pour intégrer le Criteo OneTag, suivez simplement ces cinq étapes : 

Étape 1 : Modèle de page d'accueil >home.html

<!-- Criteo Homepage Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
    { event: "setAccount", account: PARTNER_ID},
    { event: "setSiteType", type: deviceType },
    { event: "setEmail", email: "" },
    { event: "viewHome", ecpplugin: "3dcart" }
);
</script>
<!-- END Criteo Home Page Tag -->

Étape 2 : Modèle de listing >category_0.html
Remplissez les product ID sur la page soit en HTML, soit par une variable JavaScript à l'aide de la macro [catalogid]

La boucle de listing se trouve en général dans la section entre les commentaires START et END suivants.

Ajoutez le code suivant dans la boucle de listing pour créer un éventail d'ID de produits dans JavaScript :

<!--START: CATEGORY_ITEMS-->
<!--START: ITEM_TEMPLATE_0–->
<script> var prodlist = prodlist||[]; prodlist.push("[catalogid]"); </script>
<!--END: ITEM_TEMPLATE_0-->
<!--END: CATEGORY_ITEMS–>

Puis, copiez les tags suivants :

<!-- Criteo Listing Page Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
var prodlist = prodlist||[]; prodlist.push("[catalogid]");
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
    { event: "setAccount", account: PARTNER_ID},
    { event: "setSiteType", type: deviceType },
    { event: "setEmail", email: "" },
    { event: "viewList", ecpplugin: "3dcart", item: prodlist  }
);
</script>
<!-- END Criteo Listing Page Tag -->

Step 3: Product/Quick-view Template > listing_0.html or quickview.html

<!-- Criteo Product Page Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
    { event: "setAccount", account: PARTNER_ID},
    { event: "setSiteType", type: deviceType },
    { event: "setEmail", email: "" },
    { event: "viewItem", ecpplugin: "3dcart", item:  "[catalogid]" }
);
</script>
<!-- END Criteo Product Page Tag -->

étape 4 : Modèle Panier/Aperçu rapide >view_cart.html ou view_cart_quick.html

Tout comme le listing de tags, il vous faut créer l'éventail de produits dans la boucle de panier de l'adresse HTML, qui se trouve dans la section du commentaire ci-dessous :

<!--START: SHOPPING_CART_ITEM-->
<script> var cartData = cartData||[]; cartData.push({id: "[catalogid]", price: ("[ITEM_PRICE]").replace('$',''), quantity: [ITEM_QUANTITY] }); </script>
<!--END: SHOPPING_CART_ITEM-->

Puis, copiez les tags suivants :

<!-- Criteo Product Basket Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
var cartData = [];
jQuery( document ).ready(function() {
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push(
    { event: "setAccount", account: PARTNER_ID},
    { event: "setSiteType", type: deviceType },
    { event: "viewBasket", ecpplugin: "3dcart", item: cartData });
});
</script>
<!-- END Criteo Basket Page Tag -->

Étape 5 : Modèle de confirmation de commande > checkout-step4.html

Tout comme le listing de tags, il vous faut créer l'éventail de produits, qui se trouve dans la section du commentaire ci-dessous :

<!--START: items-->
<script> var orderData=orderData||[]; orderData.push({ id: "[catalogid]", price: ("[unitprice]").replace('$',''), quantity: "[numitems]" }); </script>
<!--END: items-->

Puis, copiez les tags suivants :

<!-- Criteo Sales Page Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
{ event: "setAccount", account: PARTNER_ID},
{ event: "setSiteType", type: deviceType },
{ event: "setEmail", email: "[oemail]"},
{ event: "trackTransaction", ecpplugin: "3dcart", id: "[invoicenum]" , item: orderData });
</script>
<!-- END Criteo Sales Page Tag -->

Vérification

• Les clients ayant accès à la plate-forme Criteo Integrate peuvent se connecter et utiliser le Tableau de validation pour tester les tags.
• Il est également possible de télécharger et d'utiliser l'extension Chrome Criteo Accurate.
• Le prix à l'unité de vos produits est récupéré le Criteo OneTag. Criteo multiple le prix à l'unité par la quantité de produits pour calculer la valeur totale de la commande affichée dans le rapport. Lorsque des frais de livraison, taxes, coupons, promotions ou codes de réduction sont appliqués, il est de votre responsabilité de vérifier que la valeur totale de chaque commande est correcte.