Guide de conception de créations Flash transparent HTML5

Ajouter un timer

Un timer permet de mesurer la durée d'une action effectuée dans une création, par exemple la durée pendant laquelle un utilisateur joue à un jeu.

Lorsque vous utilisez un timer, réfléchissez aux interactions qui doivent en déclencher l'arrêt. Par exemple, si vous souhaitez mesurer la durée pendant laquelle un utilisateur joue à un jeu, le timer doit s'arrêter si l'utilisateur clique sur un bouton de fermeture. Le timer doit également s'arrêter si l'utilisateur clique sur une sortie. Faites en sorte que le timer s'arrête dès que l'utilisateur arrête de jouer ou change de page.

Ajouter un timer à l'aide de Google Web Designer

  1. Accédez au panneau "Événements", puis cliquez sur le bouton représentant un signe plus (+) afin d'attribuer un événement à l'objet souhaité.
  2. Dans la fenêtre pop-up des événements, sélectionnez l'instance de l'objet en tant que source.
  3. Sélectionnez Zone cliquable, puis Appuyer/Cliquer.
  4. Toujours dans la fenêtre pop-up des événements, accédez au panneau "Action". Cliquez ensuite sur Annonce Google, puis sur Démarrer le minuteur.
  5. Accédez au panneau "Destinataire", puis cliquez sur gwd-ad.
  6. Accédez au panneau "Configuration", puis saisissez l'ID de statistique de votre choix à des fins de suivi. Prenez note de l'ID que vous saisissez, car vous allez devoir le réutiliser pour arrêter le timer.
  7. Suivez la même procédure pour arrêter le timer. Utilisez le même ID de statistique qu'à l'étape précédente.
  8. Cliquez sur Enregistrer. Le code de suivi est automatiquement ajouté sur la base de vos indications. Vous ne devez donc pas parcourir ni modifier le code source ultérieurement.
  9. Prévisualisez votre annonce dans votre navigateur préféré.
  10. Publiez l'annonce dans Studio.

Ajouter un timer à l'aide d'un éditeur HTML

  1. Créez deux éléments de bouton dans votre création en utilisant des tags <div>. Vous devez les créer dans le fichier HTML et définir leur style dans le fichier CSS. Ensuite, attribuez-leur les ID start-timer et stop-timer.

    Exemple d'objet de tag <div> dans le fichier HTML :

    <div id="start-timer">START TIMER</div>
    <div id="stop-timer">STOP TIMER</div>

    Exemple de style et d'ID dans le fichier CSS :

    #start-timer {
        position: absolute;
        width: 130px;
        height: 20px;
        top: 60px;
        left: 25px;
        cursor: pointer;
    }
    
    #stop-timer {
        position: absolute;
        width: 130px;
        height: 20px;
        top: 85px;
        left: 25px;
        cursor: pointer;
    }
  2. Pour démarrer un timer, utilisez la méthode JavaScript suivante : Enabler.startTimer(timerId:String);
  3. Pour arrêter un timer, utilisez la méthode JavaScript suivante : Enabler.stopTimer(timerId:String);
    • L'identifiant timerId correspond au nom du timer utilisé dans les rapports. Optez pour un nom qui vous permettra d'associer le timer à l'action dont vous effectuez le suivi. Vous pouvez renommer ce timer lorsque vous importez la création dans Studio ou lorsque vous en effectuez le trafficking dans Campaign Manager 360.
    • Pour que le timer s'arrête, l'identifiant timerId de stopTimer doit correspondre à celui spécifié dans startTimer. L'identifiant est sensible à la casse. Vous devez donc utiliser exactement la même chaîne.
    • Pour utiliser ces méthodes, vous devez d’abord inclure et initialiser la bibliothèque Enabler.

Extrait de code

function startTimerHandler(e) {
    Enabler.startTimer('My Timer');
}
document.getElementById('start-timer').addEventListener('click',
startTimerHandler, false);

function stopTimerHandler(e) {
    Enabler.stopTimer('My Timer');
}
document.getElementById('stop-timer').addEventListener('click',
stopTimerHandler, false);
 

Ces informations vous-ont elles été utiles ?

Comment pouvons-nous l'améliorer ?

Vous avez encore besoin d'aide ?

Essayez les solutions ci-dessous :

Recherche
Effacer la recherche
Fermer le champ de recherche
Menu principal
7471345947079397913
true
Rechercher dans le centre d'aide
true
true
true
true
true
74220
false
false