Après avoir créé une annonce In-Feed, l'étape suivante consiste à en insérer le code dans le code HTML de votre flux.
Où placer le code de votre annonce In-feed ?
Insérez le code de votre annonce In-feed dans le contenu, ou au début ou à la fin du flux. Pour ce faire, vous pouvez soit modifier directement le code HTML de votre flux ou, si vous utilisez un système de gestion de contenu, vous pourrez peut-être utiliser un plug-in qui insérera le code pour vous.
À titre d'exemple, une configuration d'annonce In-feed peut se présenter comme suit :
|
Contenu – bloc 1 : |
 |
|
Contenu – bloc 2 : |
 |
|
Annonce native In-feed : |
 |
|
Contenu – bloc 3 : |
|
|
Contenu – bloc 4 : |
|
Comment placer votre annonce In-feed ?
En règle générale, votre système de gestion de contenu comprend 1) une base de données qui contient votre contenu et 2) un extrait de code qui exécute votre contenu au sein d'une boucle, créant ainsi votre flux. Cet extrait de code se trouve dans votre fichier de modèle, lui-même stocké dans le dossier de modèles du système de gestion de contenu (il s'appelle parfois "dossier de thème").
Modifier le code dans votre fichier de modèle
Pour placer votre annonce In-feed, modifiez le code dans votre fichier de modèle. Pour ce faire, procédez comme suit :
- Ouvrez le fichier de modèle de la page sur laquelle votre flux se trouve.
- Recherchez la boucle qui crée votre flux. Astuce : le code de la boucle contient très probablement une commande "while" ou "for each".
- Modifiez le code de la boucle pour insérer votre annonce In-Feed dans votre flux, notamment de la façon suivante :
- Si votre boucle n'a pas de compteur, ajoutez-en un afin de définir la fréquence d'insertion de votre annonce In-Feed.
- Ajoutez une instruction "if" dans la boucle afin que votre annonce In-Feed soit diffusée à la fréquence définie dans le compteur.
Vous trouverez ci-dessous un pseudocode. Votre code aura une structure similaire. Toutefois, selon le langage de programmation que vous utilisez, l'implémentation réelle sera probablement différente.
Posts[] posts;
Var count=1; // If your code does not include a counter define one
While (count < posts.length) // Increase the value of "count" by 1 until the final post in the database
{
If (count%3=0) //If the value of "count" equals 3 or 6 or 9 insert the ad
{
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous">
</script>
<ins class="adsbygoogle" style="display:block"
data-ad-format="fluid"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
}
<h3>{{ post.title }}</h3> // for all count values insert the content block title
<p>{{ post.body }}<p> //Insert the content block body
<img src="{{ post.thumbnail}}"> //Insert the content block image
}
Important
Assurez-vous d'insérer votre code d'annonce dans un conteneur parent (<div>, <iframe>, etc.) qui comporte les éléments suivants :
- Une largeur valide : si vous insérez le code d'annonce dans un conteneur parent dont la largeur n'est pas définie explicitement (par exemple, un élément Flash transparent), vos annonces ne seront pas diffusées. La largeur du conteneur parent sert à calculer celle de vos annonces. Notez que la largeur minimale d'une annonce In-feed est de 250 pixels.
- Une hauteur variable : si vous insérez votre code d'annonce dans un conteneur parent de hauteur fixe, vos annonces risquent d'être déformées.
