Dans une boutique Web OpenCart, les bannières peuvent être affichées sous plusieurs formes. Ils peuvent être affichés sous forme d'image statique, de carrousel ou de diaporama. Chaque bannière peut inclure une ou plusieurs images et ces groupes d'images peuvent être affectés à différents modules en fonction de la taille et de la fonction à laquelle ils fonctionnent.
Lorsque vous souhaitez placer une bannière sur votre site Web, commencez par télécharger des images sur des bannières, puis affectez ces modules à des modules d'affichage..
Dans le tableau de bord d'OpenCart, accédez à Système> Conception> Bannières. Insérons notre première bannière, ajoutons-lui un nom et définissons son statut. Nous venons de créer un groupe pour les images que nous allons télécharger.
Commençons à ajouter des images en cliquant sur le bouton Ajouter une bannière bouton. Comme vous le voyez ici, nous pouvons ajouter un titre à chaque langue de la boutique Web, copier ou taper votre lien et parcourir ou télécharger le fichier image (JPG, PNG ou GIF). Nous pouvons assigner autant d'images de bannière que nous le souhaitons, mais toutes les images doivent avoir la même taille ou au moins le même ratio, car ces images basculeront ou glisseront à l'intérieur d'un module contenant une bannière. (La convention de nommage des bannières peut être déroutante puisque le système utilise le terme bannière pour un ensemble d'images de bannière et utilise bannière pour le image lui-même aussi)
Téléchargement d'images pour des bannières dans OpenCart (Admin> Système> Design> Bannières)Comme nous l'avons appris ci-dessus, les bannières sont affichées avec des modules dans OpenCart. Il existe trois modules couramment utilisés pour afficher des bannières: le Module bannière, Carrousel et Diaporama. Toutes ont des fonctions similaires: elles animent des images de même taille et permettent à l'utilisateur de cliquer dessus..
UNE Module bannière affiche les bannières en se fanant images de bannière dans un endroit chacun après chacun. Pour affecter une bannière à un module d’espace réservé à la bannière, accédez à Extensions> Modules> Banner> Edit.
Cliquez sur Ajouter un module et cela nous permet d'invoquer des bannières dans une mise en page. Vous devez choisir la bannière à afficher, définir le Dimension, choisir un Disposition où afficher, un Position de la colonne, met le Statut et le Ordre du module. La taille du module doit être telle qu’elle s’insère dans la colonne il sera placé. Le système redimensionne les images téléchargées en fonction de cette dimension.. Layouts sont prédéfinis et leur nom est descriptif. Position peut être réglé à gauche, à droite, en haut ou en bas (voir les détails sur les positions de la disposition ici). Ordre définit le tableau d'apparence visuelle de plusieurs modules dans une colonne.
Une bannière ne peut être attribuée à un module que lorsque la bannière est déjà créée.le Module Diaporama affiche les images de la bannière sous forme d'animation de diaporama en mouvement. Ce module est généralement affiché sur la page d'accueil avec de plus grandes images de paysage. Les principaux paramètres de ce module, tels que le type d'animation, la vitesse ou son apparence, sont définis dans son fichier de thème, qu'il n'est pas nécessaire de modifier, car nous utilisons le module de préconfiguration..
Nous pouvons attribuer une bannière déjà définie et téléchargée à un diaporama en allant sur Extensions> Modules> Slideshow> Edit. Lors de l'ajout d'un module, nous devons définir des paramètres similaires à ceux du module bannière ci-dessus.. Choisissez une bannière montrer, ajouter sa taille, choisir un disposition et position, met le statut et le ordre. Voir l'illustration ci-dessous.
Pour obtenir la meilleure expérience visuelle possible, la taille des images de bannière téléchargées précédemment doit être identique à celle du module..le module carrousel vous permet d'afficher un ensemble de bannières plus petites les unes à côté des autres et de les animer, de les afficher et de les masquer pas à pas tout en vous déplaçant horizontalement.
Nous pouvons configurer ce module de la même manière que nous avons ajouté une bannière à un diaporama, bien qu'un module de carrousel accepte deux autres choses:
Ces modules de bannières sont très utiles et peu de solutions de commerce électronique en font partie intégrante, même si leurs capacités sont limitées, par exemple. vous ne pouvez pas voir le nombre de clics sur les bannières. Si nous voulons mesurer les clics, nous pouvons utiliser Google Analytics pour cela (étant donné que vous avez déjà installé le code de suivi).
En cliquant sur une bannière qui redirige vers une page du même site est un un événement en terme Google Analytics. C’est pourquoi nous utilisons le suivi des événements fonctionnalité de Google Analytics pour mesurer les clics de bannière sur site dans OpenCart. Voici un exemple de code HTML pour la mise en œuvre du suivi des événements:
Un événement se produit lorsqu'un utilisateur clique sur quelque chose. L’événement est suivi par le _un événement()
méthode qui contient les informations suivantes: Catégorie - groupe d'objets que nous voulons suivre (par exemple, un diaporama), action - le type d'interaction de l'utilisateur (par exemple, clic de la bannière), étiquette - une chaîne optionnelle pour des données supplémentaires, valeur - données numériques facultatives pour l'action. Comme vous pouvez le constater, une simple ligne de modification HTML aidera à suivre les clics de nos bannières..
Les modules bannière, diaporama et carrousel ont leurs propres modèles dans le répertoire du thème utilisé. Il suffit de modifier quelques lignes dans les fichiers de modèles de modules. C’est ce que nous devons ajouter à la balises dans les fichiers modèles:
onClick = "_ gaq.push (['_ _ trackEvent', 'type de bannière' ',' cliqué ','']); "
Pour les bannières, trouvez ce code ou un morceau de code similaire dans votre thème votre dossier de thème \ template \ module \ banner.tpl
fichier:
">
et remplacez par ceci:
"onClick =" _ gaq.push (['_ trackEvent', 'Bannières', 'Cliqué', '']); ">
Comme vous pouvez le voir, nous avons ajouté Bannières comme le Catégorie composant, Cliqué comme le action, et le sans blason version du titre de la bannière comme étiquette. Nous n’avons pas besoin de choisir une valeur, car elle vaut une valeur par défaut et dans notre cas, c’est ce dont nous avons besoin..
Le modèle de diaporama, qui peut être trouvé à votre dossier de thème \ template \ module \ slideshow.tpl
, devrait être changé de ceci:
">
pour ça:
"onClick =" _ gaq.push (['_ trackEvent', 'Diaporama', 'Cliqué', '']); ">
Le modèle de carrousel se trouve à votre dossier de thème \ template \ module \ carousel.tpl
et ces lignes doivent être changées de ceci:
pour ça:
Les résultats des clics sont visibles si vous accédez à Google Analytics et à la Comportement section> Événements vue d'ensemble. Là nous verrons la catégorie (dans notre cas le type de bannière), le nombre de clics et le nom de la bannière.
Nous avons appris qu’il fallait d’abord télécharger les images des bannières sur des bannières (groupes) afin de les affecter ensuite à un module d’affichage, tel que bannière, diaporama ou carrousel. Plus tard, nous avons modifié les fichiers de modèle de module pour suivre les événements liés aux clics avec Google Analytics..
Si vous avez des questions, veuillez les poser dans la zone de discussion ci-dessous..