Concevoir une création expand avec Google Web Designer

Au départ, les annonces expand ont la même taille que l'espace publicitaire dans lequel elles sont diffusées. Ensuite, lorsque l'internaute interagit avec l'annonce (lorsqu'il clique sur un bouton, par exemple), l'annonce se développe, devient plus grande que l'espace publicitaire et affiche davantage de contenu. Pour créer une annonce expand dans Google Web Designer, démarrez à partir d'un fichier vierge ou ouvrez un modèle de création expand prédéfini, puis ajoutez votre propre texte, vos propres images, etc.

Partir de rien

Étape 1 : Créer un fichier

Pour concevoir une création expand avec vidéo dans Google Web Designer, procédez comme suit :

1. Ouvrez Google Web Designer, puis cliquez sur Fichier > Nouveau fichier. La fenêtre "Créer un fichier vierge" s'affiche.
2. Dans la liste des annonces, sélectionnez Annonce expand.
3. Sélectionnez l'environnement Display & Video 360.
4. Définissez les dimensions de l'annonce repliée et dépliée.
5. Donnez un nom à la création. Il s'agit du nom du fichier HTML.
6. Choisissez l'Emplacement de votre ordinateur où les fichiers Google Web Designer seront enregistrés. Saisissez le chemin de l'emplacement ou cliquez sur l'icône de recherche pour accéder à l'emplacement désiré.
7. Définissez le Mode d'animation :
   1. Rapide : ce mode vous permet d'animer votre annonce scène par scène. Pour en savoir plus, consultez l'article Créer des animations en mode rapide du centre d'aide Google Web Designer.
   2. Avancé : ce mode vous permet d'animer des éléments individuels sur leur propre timeline. Pour en savoir plus, consultez l'article Créer des animations en mode avancé du centre d'aide Google Web Designer.
8. Cliquez sur OK.

Google Web Designer crée les pages repliées et dépliées initiales (appelées Page bannière et Page développée). Il ajoute automatiquement un événement de zone cliquable à la page repliée, ce qui permet de déplier l'annonce, et une zone cliquable de fermeture à une page développée, ce qui permet de replier l'annonce. Google Web Designer ajoute également automatiquement le code initial nécessaire pour permettre à l'annonce de communiquer avec l'ad server et de collecter des statistiques de suivi.

Étape 2 : Configurer la page bannière

Pour configurer l'annonce repliée dans la page bannière, procédez comme suit :

1. Importez des images en les faisant glisser dans l'espace de création ou depuis le panneau Bibliothèque d'éléments.
2. Vous avez également la possibilité de créer des animations ou d'ajouter des composants intégrés ou personnalisés sur la page.
3. Une fois votre bannière terminée, sélectionnez le composant Zone cliquable, puis cliquez sur le bouton "Déplacer vers le haut".
4. Enregistrez.

Pour que la création se déplie lorsque l'utilisateur passe la souris dessus, procédez comme suit :

1. Ouvrez le panneau "Événements", puis cliquez sur le bouton + pour ajouter un événement de survol avec la souris.
2. Sélectionnez la cible expand-button.
3. Sélectionnez l'événement Souris > survol avec la souris.
4. Sélectionnez l'action Annonce Google > Accéder à la page.
5. Sélectionnez le destinataire gwd-ad.

En savoir plus sur l'utilisation des événements dans Google Web Designer

Étape 3 : Configurer la page développée

1. Passez à la page développée à l'aide de l'indicateur de page situé au bas de l'espace de création .
2. Importez des images en les faisant glisser dans l'espace de création ou depuis le panneau Bibliothèque d'éléments.
3. Vous avez également la possibilité de créer des animations ou d'ajouter des composants intégrés ou personnalisés sur la page.
4. Enregistrez.

Ajouter une incitation à l'action

1. Votre annonce doit comprendre un bouton ou un autre élément visuel clair d'incitation à l'action sur lequel l'utilisateur pourra cliquer ou appuyer.
2. Faites glisser dans l'espace de création le composant "Zone cliquable" depuis le dossier "Interaction" du panneau "Composants", puis placez-le au-dessus de l'incitation à l'action.
3. Cliquez sur l'icône de nouvel événement  dans le panneau "Événements".
4. Dans la boîte de dialogue qui s'affiche, sélectionnez les options suivantes :

   Cible	Composant "Zone cliquable" (gwd-taparea_1)
   Événement	Zone cliquable > Appuyer/Cliquer
   Action	Annonce Google > Quitter l'annonce Remarque : Une action similaire, Quitter l'annonce (écrase l'URL), ne vous permet pas de modifier l'URL en dehors de la création (par exemple, dans Studio ou Campaign Manager 360). Vous ne devez utiliser cette option que pour les annonces dynamiques.
   Destinataire	gwd-ad
   Configuration	ID des statistiques : libellé (par exemple, "Incitation à l'action") destiné à faciliter la compréhension des rapports. URL : URL de sortie. Réduire en quittant : pour les annonces expand, cochez cette case afin de réduire l'annonce lorsque l'internaute la ferme. Mettre le fichier multimédia en pause à la fermeture : cochez cette case pour que la lecture des contenus vidéo et audio s'arrête lorsque l'internaute ferme l'annonce. Page réduite à la fermeture : pour les annonces expand, page à afficher lorsque l'internaute ferme l'annonce.

   

(Facultatif) Ajouter une vidéo

Si vous souhaitez ajouter une vidéo à votre création, utilisez soit le composant vidéo, soit le composant YouTube. Si votre vidéo est hébergée sur YouTube, utilisez le composant YouTube. Si ce n'est pas le cas, utilisez le composant vidéo pour les formats vidéo compatibles HTML5 suivants : 

• .MP4
• .OGG/.OGV
• .WebM

Partir d'un modèle

Les modèles sont des annonces préconfigurées dans des formats répandus. Ils utilisent généralement des fonctionnalités et des styles courants. En remplaçant les images et d'autres éléments, vous pouvez rapidement créer une annonce fonctionnelle pertinente.

Étape 1 : Créer un fichier à partir d'un modèle

1. Dans le menu "Fichier", sélectionnez Créer depuis un modèle. La galerie de modèles s'ouvre.
2. Pour trouver les modèles de bannières Google Marketing Platform, procédez comme suit :
   1. Cliquez sur l'icône de recherche .
   2. Développez la section "Types d'annonces", puis sélectionnez Annonce expand. 
   3. Développez la section "Plates-formes", puis sélectionnez Display & Video 360.
   4. Fermez le panneau des filtres. Une liste des mises en page compatibles s'affiche.
3. Cliquez sur Utiliser la mise en page pour la mise en page de votre choix.
4. Si plusieurs options de taille sont disponibles, sélectionnez celle que vous souhaitez utiliser.
5. Attribuez un nom au nouveau fichier (obligatoire).
6. Vous pouvez éventuellement changer l'emplacement d'enregistrement du fichier. Pour ce faire, saisissez le chemin de l'emplacement ou cliquez sur l'icône de dossier  pour accéder à l'emplacement désiré.
7. Cliquez sur Créer.

Étape 2 : Ajouter ou remplacer des images dans le modèle

Les modèles d'annonces expand de Google Web Designer incluent une page bannière (l'annonce réduite) et une page développée (l'annonce expand). Par défaut, la page bannière s'affiche lorsque vous créez un fichier. Passez à la page développée à l'aide de l'indicateur de page situé au bas de l'espace de création .

Chaque page inclut des espaces réservés et des identifiants descriptifs pour chaque élément. Commencez par remplacer chaque espace réservé générique par un élément approprié pour votre annonce. Les annonces créées à partir de modèles sont complètement modifiables. Vous pouvez ajouter ou supprimer des éléments, des composants et des événements à votre guise afin de créer une annonce plus personnalisée.

L'option "Remplacer l'image" vous permet de remplacer une image par une autre image provenant de la bibliothèque ou par une image que vous avez importée. Cette fonctionnalité est particulièrement utile lorsque vous avez besoin de remplacer des images fournies avec un modèle.

Pour remplacer une image dans une annonce créée à partir d'un modèle, procédez comme suit :

1. Faites un clic droit sur l'image que vous souhaitez remplacer.
2. Sélectionnez Remplacer l'image dans le menu contextuel.
3. Dans la boîte de dialogue qui s'affiche, sélectionnez une image provenant de la bibliothèque ou cliquez sur le bouton d'ajout  pour sélectionner une image enregistrée sur votre ordinateur.
4. Cliquez sur OK.

Prévisualiser votre création finalisée

Pour prévisualiser votre annonce dans Google Web Designer, procédez comme suit :

1. Cliquez sur le bouton d'aperçu au bas de l'écran . Google Web Designer détecte les navigateurs compatibles présents sur votre système et vous permet de choisir celui que vous voulez utiliser.
2. Pour choisir le navigateur dans lequel prévisualiser votre travail, cliquez sur la flèche de sélection à droite du bouton d'aperçu, puis choisissez le navigateur dans la liste.
3. Une fois la page chargée, examinez l'annonce repliée.
4. Cliquez sur l'incitation à l'action pour déplier l'annonce.

(Facultatif) Configurer une création expand multidirectionnelle

Les créations expand multidirectionnelles peuvent se déplier dans la bonne direction en fonction de leur position sur un site. Suivez les étapes ci-dessous pour concevoir une création expand multidirectionnelle.

Pour gagner du temps, utilisez le modèle de création expand multidirectionnelle de Google Web Designer. Le modèle comprend une grande partie du code et de la configuration des étapes présentées ci-dessous.

Configuration multidirectionnelle

Étape 1 : Augmenter la taille de l'espace de création

1. Augmentez la taille de la page développée afin qu'il y ait suffisamment d'espace pour la zone développée nécessaire pour chaque direction.

   Par exemple, si la taille de la création repliée est de 300x250, celle de la création dépliée est de 600x250. Pour que la création puisse se déplier vers la droite ou vers la gauche, définissez la taille de la page développée sur 900x250.
   
   

2. Utilisez l'indicateur de page pour revenir à la page bannière .
3. Cliquez sur le bouton d'affichage de la vue développée de l'annonce . 
4. Repositionnez la zone développée visible de manière que la zone repliée se trouve au centre. Pour en savoir plus sur l'utilisation du bouton d'affichage de la vue développée de l'annonce, accédez au centre d'aide Google Web Designer.
5. Passez à la page développée à l'aide de l'indicateur de page situé au bas de l'espace de création .
6. Réglez la position des éléments de votre création pour qu'ils correspondent à la nouvelle taille de l'espace de création.

Étape 2 : Ajouter du code de positionnement

1. Cliquez sur Vue Code.
2. Faites défiler vers le bas, jusqu'au tag de script dont l'ID est gwd-init-code : 
   <script type="text/javascript" id="gwd-init-code">
3. Ajoutez du code pour activer l'expansion multidirectionnelle, puis ajoutez du code de traitement d'événement. Consultez la documentation relative au SDK HTML5 de DoubleClick Studio pour obtenir des méthodes et des exemples de l'API.

   Exemple de code 

   Cet exemple ne se déplie que vers la gauche et vers la droite. Pour en savoir plus, consultez le SDK HTML5 de Studio.

   Enabler.setIsMultiDirectional(true);
   
   // Modifier la position des éléments en fonction de la direction d'expansion
   function expandStartHandler() {
     var direction = Enabler.getExpandDirection().toString();
     if (direction == 'tr' || direction == 'br') {
       // Ajouter du code ici pour positionner des éléments en cas d'expansion vers la droite
       // Modifier btnClose de manière à le faire correspondre à l'ID de votre bouton de fermeture et changer sa position
       btnClose.style.left = '875px';
     } else {
       // Ajouter du code ici pour positionner des éléments en cas d'expansion vers la gauche
       // Modifier btnClose de manière à le faire correspondre à l'ID de votre bouton de fermeture et changer sa position
       btnClose.style.left = '10px';
     }
   }
   
   Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START, expandStartHandler);

4. Ajoutez du code pour positionner chaque élément de la création dans les directions d'expansion avec lesquelles vous souhaitez que votre création soit compatible.

Une fois votre création terminée, vous pouvez la publier dans Studio.