Recherche
Effacer la recherche
Fermer la recherche
Applications Google
Menu principal

Guide de création du composant Pixel Loader

Pixel Loader permet de charger des URL (en général, il s'agit d'une URL de pixel de suivi 1 x 1) dans les créations rich media. Le composant charge le pixel lorsque des événements spécifiques surviennent dans la création, tels que des interactions, des clics d'internautes, des lectures de vidéo, etc.

Utilisez le guide de création du composant Pixel Loader AS3 pour les créations Flash.

Fonctionnalités

  • Compatibilité avec un grand nombre d'événements, notamment :
  • Validation d'URL
  • Contournement du cache

Conditions préalables

  • Vous devez concevoir une création HTML5.
  • Vous devez importer le composant Enabler de DoubleClick Studio dans le fichier HTML.
  • Vous devez importer la bibliothèque d'éléments personnalisés Polymer dans le fichier HTML.

Importations

Avant d'utiliser le composant Pixel Loader, vous devez inclure les scripts ci-dessous dans la balise "head" du fichier HTML de votre création.

  1. Composant Enabler de DoubleClick Studio, qui correspond à la bibliothèque de code centrale de DoubleClick Studio.
  2. Bibliothèque d'éléments personnalisés Polymer, qui permet de créer des éléments HTML personnalisés réutilisables, encapsulés et fonctionnant sur les ordinateurs de bureau et les appareils mobiles.
  3. Bibliothèque du composant Pixel Loader.
<script src="//s0.2mdn.net/ads/studio/Enabler.js"></script>
<script src="//www.gstatic.com/external_hosted/polymer/custom.elements.min.js"></script>
<script src="//www.gstatic.com/ads/ci/studio/pixelloader/1/pixelloader_min.js"></script>

Configurer le composant

Vous disposez de deux moyens pour ajouter le composant à votre création. Vous pouvez inclure le tag Pixel Loader dans le fichier HTML ou créer une instance dans le fichier JavaScript.

Choisissez l'une des méthodes ci-dessous.

Ajouter le tag d'élément personnalisé du composant Pixel Loader au fichier HTML
<ci-studio-pixelloader
  eventtype="auto"
  url="https://example.com/yourpixel.gif?ord=[timestamp]">
</ci-studio-pixelloader>
Créer une instance de la classe PixelLoader dans le fichier JavaScript

var pixel = document.createElement('ci-studio-pixelloader'); 
pixel.setAttribute('eventtype', 'auto');
pixel.setAttribute('url', 'https://example.com/yourpixel.gif?ord=[timestamp]');

Personnaliser les paramètres du composant

Utilisez des attributs de composant afin de déterminer l'événement qui déclenche l'URL de pixel. Développez les sections ci-dessous pour connaître les attributs disponibles et obtenir des exemples de tags.

Événement cible

Définit l'objet depuis lequel vous souhaitez écouter les événements. Cet attribut fonctionne avec l'attribut eventtype pour cibler des événements spécifiques.

  • eventtarget Nom de l'objet depuis lequel écouter les événements.
    Valeurs valides : dom, enabler, ytplayer.
Exemple de tag

Pour écouter n'importe quel événement Studio, vous devez définir eventtarget sur enabler. Dans l'exemple ci-dessous, un pixel est chargé suite à une interaction.

<ci-studio-pixelloader
    eventtarget="enabler"
    eventtype="interaction"
    url="https://example.com/yourpixel.gif?ord=[timestamp]">
</ci-studio-pixelloader>
Type d'événement

Définit le type d'événement qui déclenche le chargement de l'URL de pixel. Fonctionne avec eventtarget pour cibler des événements spécifiques. Vous pouvez également définir eventtype sur auto ou manual pour les événements qui ne reposent pas sur un événement cible. Voir la section Chargement automatique et manuel ci-dessous.

  • eventtype Nom de l'événement qui déclenche le chargement de l'URL de pixel de suivi.
    Valeurs valides : auto, manual, StudioEvents lorsque vous définissez eventtarget sur enabler, DOMEvents ou MediaEvents lorsque vous définissez eventtarget sur dom.
Exemple de tag

Pour charger un pixel suite à un événement de sortie Studio, utilisez l'exemple ci-dessous, en remplaçant l'URL de pixel de l'exemple par la vôtre.

<ci-studio-pixelloader
    eventtarget="enabler"
    eventtype="exit"
    url="https://example.com/yourpixel.gif?ord=[timestamp]">
</ci-studio-pixelloader>
URL de pixel

Affectez l'URL du pixel à charger. L'URL doit commencer par http:// ou https://.

  • url URL du pixel de suivi 1 x 1 à charger.
    Valeur valide : URL commençant par http:// ou https://.

Contournement du cache

Ajoutez la macro [timestamp] à l'URL pour permettre le contournement du cache. Dans ce cas, un nouveau chargement du pixel a lieu lors de chaque chargement d'annonce, en lieu et place d'un chargement depuis le cache par le navigateur.

https://example.com/pixel.gif?ord=[timestamp] devient automatiquement https://example.com/pixel.gif?ord=123456789. Ce numéro n'est mentionné qu'à titre d'exemple. Lorsque votre annonce est diffusée, un numéro unique est attribué.

Validation d'URL

Les entités HTML du caractère esperluette (&amp;) sont remplacées automatiquement.

https://example.com/pixel.gif?ord=[timestamp]&amp;foo=bar devient automatiquement https://example.com/pixel.gif?ord=[timestamp]&foo=bar.

Exemple de tag

Définit une URL de pixel avec contournement du cache pour l'exemple d'URL de pixel
https://example.com/yourpixel.gif:

<ci-studio-pixelloader
    eventtarget="enabler"
    eventtype="exit"
    url="https://example.com/yourpixel.gif?ord=[timestamp]">
</ci-studio-pixelloader>
Chargement cumulatif de pixels

Par défaut, le chargement des pixels n'a lieu que lors de la première occurrence d'un événement (par exemple, une sortie). Si vous voulez que le pixel se charge à chaque fois que l'événement se produit, définissez l'attribut cumulative sur true.

  • cumulative Indique si le chargement du pixel doit avoir lieu à chaque fois que l'événement se produit, ou uniquement la première fois.
    Les valeurs valides sont false et true.
    La valeur par défaut est false.

Exemple de tag cumulatif

Charger l'URL de pixel à chaque fois que l'événement de sortie se produit :

<ci-studio-pixelloader
    eventtarget="enabler"
    eventtype="exit"
    cumulative="true"
    url="https://example.com/yourpixel.gif?ord=[timestamp]">
</ci-studio-pixelloader>
Charger le pixel en cas d'événement de sortie spécifique

Si votre création comporte plusieurs événements de sortie et si vous souhaitez qu'un pixel ne se charge que suite à un événement de sortie spécifique, utilisez l'attribut exitname pour indiquer la sortie qui doit déclencher le chargement du pixel.

  • exitname Nom de l'événement de sortie qui doit provoquer le chargement du pixel.
    Valeur valide : nom de l'événement de sortie.
  • eventtype Type d'événement qui déclenche le chargement de l'URL de pixel de suivi. Vous devez utiliser une valeur "exit" pour que le paramètre exitname fonctionne.
Exemple de tag d'événement de sortie spécifique

Charger l'URL de pixel lorsqu'un événement de sortie myExit se produit :

<ci-studio-pixelloader
    eventtarget="enabler"
    eventtype="exit"
    exitname="myExit"
    url="https://example.com/yourpixel.gif?ord=[timestamp]">
</ci-studio-pixelloader>
Charger le pixel suite à un événement d'élément DOM

Pour charger un pixel suite à l'occurrence d'un événement d'élément DOM, définissez eventtarget sur dom et indiquez l'ID de l'élément DOM à écouter dans l'attribut domelementid.

  • domelementid ID de l'élément DOM depuis lequel écouter un événement.
    Valeur valide : un ID d'élément DOM.
  • eventtarget Utilisez la valeur dom pour cibler les événements DOM.
  • eventtype Nom de l'événement qui déclenche le chargement de l'URL de pixel de suivi.
    Valeur valide : l'événement DOM qui doit provoquer le chargement du pixel.
Exemple de tag d'événement DOM

Charger l'URL de pixel lorsqu'un internaute clique sur un élément nommé myElement :

<ci-studio-pixelloader
    eventtarget="dom"
    eventtype="click"
    domelementid="myElement"
    url="https://example.com/yourpixel.gif?ord=[timestamp]">
</ci-studio-pixelloader>
Charger le pixel après interaction de l'internaute

Pour charger un pixel après interaction de l'internaute, définissez eventtarget sur enabler et eventtype sur interaction.

  • eventtarget Utilisez la valeur enabler pour cibler les événements du composant Enabler.
  • eventtype Utilisez la valeur interaction pour charger un pixel en cas d'occurrence d'un événement d'interaction de l'utilisateur Studio.
Exemple de tag d'événement d'interaction

Charger l'URL de pixel après un événement d'interaction de l'utilisateur Studio :

<ci-studio-pixelloader
    eventtarget="enabler"
    eventtype="interaction"
    url="https://example.com/yourpixel.gif?ord=[timestamp]">
</ci-studio-pixelloader>
Charger le pixel au début de la lecture d'une vidéo

Pixel Loader est compatible avec les événements vidéo des éléments du lecteur YouTube de Google Web Designer, des éléments vidéo HTML5 et du lecteur JavaScript de YouTube. Développez les exemples ci-dessous pour découvrir comment.

Exemple relatif au lecteur YouTube de Google Web Designer

Écouter un événement de lecture :

// Sample Google Web Designer YouTube player.
<gwd-youtube id="gwdplayer"
    video-url="//www.youtube.com/watch?v=M7FIvfx5J10">
</gwd-youtube>

// Listen to the playing event from DOM element gwdplayer.
<ci-studio-pixelloader
    eventtarget="dom"
    eventtype="playing"
    domelementid="gwdplayer"
    url="https://example.com/yourpixel.gif?ord=[timestamp]">
</ci-studio-pixelloader>
Exemple relatif à un élément vidéo HTML5

Écouter un événement de lecture depuis un élément vidéo HTML5 avec l'ID myVideo :

// Sample video element.
<video
    id="myVideo"
    controls=""
    preload="none"
    poster="http://media.w3.org/2010/05/sintel/poster.png"
    width="300">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4"     type="video/mp4">
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm"     type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv"     type="video/ogg">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>

// Listen for the play event from the DOM element myVideo.
<ci-studio-pixelloader
    eventtarget="dom"
    eventtype="play"
    domelementid="myVideo"
    url="https://example.com/yourpixel.gif?ord=[timestamp]">
</ci-studio-pixelloader>
Exemple relatif au lecteur JavaScript de YouTube

Paramétrez Pixel Loader via JavaScript au lieu d'utiliser l'élément personnalisé lorsque vous voulez écouter des événements du lecteur YouTube. Pixel Loader dispose d'une méthode setupYTPlayer() qui lui permet d'accepter les événements issus de l'API Player YouTube standard ou de studioinnovation.YTPlayer. La méthode setupYTPlayer() accepte trois paramètres :

  • ytplayer Nom d'instance du lecteur YouTube de votre création.
  • eventType Type d'événement à écouter (dans ce cas, playing).
  • url URL du pixel à charger en cas d'événement de lecture de vidéo.
// Sample YouTube player.
var player = new YT.Player('ytpapi-container', {
    width: 300,
    height: 200,
    videoId: 'M7lc1UVf-VE',
    playerVars: {
      autoplay: 0,
      enablejsapi: 1,
      html5: 1,
    }
});

// Create an instance of Pixel Loader with JavaScript.
var pixelloader = new ci.studio.pixelloader.PixelLoader();

// Use setupYTPlayer() to listen to the playing event.
pixelloader.setupYTPlayer(
    player,
    'playing',
    'http://example.com/pixel.gif?ord=[timestamp]');

Chargement automatique et manuel

Si vous voulez charger un pixel suite à l'occurrence d'un événement qui n'est pas lié à un événement cible, vous pouvez définir eventtype sur auto ou manual.

  • auto Charge le pixel dès que le chargement du composant est terminé.
    Exemple de tag de chargement automatique

    Pour charger un pixel automatiquement dès que le chargement du composant est terminé :

    <ci-studio-pixelloader
        eventtype="auto"
        url="https://example.com/yourpixel.gif?ord=[timestamp]">
    </ci-studio-pixelloader>
  • manual Charge le pixel uniquement lorsque la méthode load() est appelée via JavaScript.
    Exemple de tag de chargement manuel

    Pour charger un pixel manuellement, définissez eventtype sur manual et appelez la méthode load() sur l'élément personnalisé. Dans l'exemple ci-dessous, la méthode load() est appelée depuis le gestionnaire d'événements de clic d'un bouton.

    <ci-studio-pixelloader
        id="manualPixelLoader"
        eventtype="manual"
        url="https://example.com/yourpixel.gif?ord=[timestamp]">
    </ci-studio-pixelloader>

    <button     onclick="document.getElementById('manualPixelLoader').load()">Load</button>
Cet article vous a-t-il été utile ?