Événements JavaScript

L'iframe Gapila communique avec votre page via l'API postMessage. Vous pouvez écouter les événements du jeu pour personnaliser l'expérience utilisateur.

Événements disponibles

GAPILA_READY

Émis lorsque le jeu est chargé et prêt.

{
  type: "GAPILA_READY",
  payload: {
    gameId: "abc123-def456",
    gameType: "wheel"
  },
  timestamp: 1703678400000
}

GAPILA_PARTICIPATION

Émis lorsqu'un utilisateur soumet sa participation.

{
  type: "GAPILA_PARTICIPATION",
  payload: {
    participantId: "xyz789",
    email: "user@example.com"
  },
  timestamp: 1703678500000
}

GAPILA_WIN

Émis lorsqu'un utilisateur gagne un prix.

{
  type: "GAPILA_WIN",
  payload: {
    prizeId: "prize123",
    prizeName: "10% de réduction",
    participantId: "xyz789"
  },
  timestamp: 1703678600000
}

GAPILA_ERROR

Émis en cas d'erreur.

{
  type: "GAPILA_ERROR",
  payload: {
    code: "PARTICIPATION_FAILED",
    message: "Vous avez déjà participé"
  },
  timestamp: 1703678700000
}

GAPILA_RESIZE

Émis lorsque la taille du contenu change (pour auto-height).

{
  type: "GAPILA_RESIZE",
  payload: {
    height: 750
  },
  timestamp: 1703678800000
}

Écouter les événements

Exemple de base

window.addEventListener('message', function(event) {
  // Vérifier l'origine pour la sécurité
  if (!event.origin.includes('gapila.com')) {
    return;
  }

  const { type, payload, timestamp } = event.data;

  switch (type) {
    case 'GAPILA_READY':
      console.log('Jeu prêt !', payload);
      break;

    case 'GAPILA_PARTICIPATION':
      console.log('Nouvelle participation', payload);
      // Tracker l'événement dans votre analytics
      gtag('event', 'gapila_participation', {
        game_id: payload.gameId
      });
      break;

    case 'GAPILA_WIN':
      console.log('Gain !', payload);
      // Afficher une notification personnalisée
      showCustomNotification(payload.prizeName);
      break;

    case 'GAPILA_ERROR':
      console.error('Erreur Gapila', payload);
      break;

    case 'GAPILA_RESIZE':
      // Ajuster la hauteur de l'iframe
      document.getElementById('gapila-iframe').style.height =
        payload.height + 'px';
      break;
  }
});

Exemple avancé avec classe

class GapilaEmbed {
  constructor(iframeId, options = {}) {
    this.iframe = document.getElementById(iframeId);
    this.options = options;
    this.callbacks = {};

    this.init();
  }

  init() {
    window.addEventListener('message', (event) => {
      if (!event.origin.includes('gapila.com')) return;

      const { type, payload } = event.data;

      if (this.callbacks[type]) {
        this.callbacks[type].forEach(cb => cb(payload));
      }
    });
  }

  on(eventType, callback) {
    if (!this.callbacks[eventType]) {
      this.callbacks[eventType] = [];
    }
    this.callbacks[eventType].push(callback);
    return this;
  }

  off(eventType, callback) {
    if (this.callbacks[eventType]) {
      this.callbacks[eventType] = this.callbacks[eventType]
        .filter(cb => cb !== callback);
    }
    return this;
  }

  // Demander la taille actuelle
  requestSize() {
    this.iframe.contentWindow.postMessage(
      { type: 'GAPILA_REQUEST_SIZE' },
      'https://gapila.com'
    );
  }

  // Fermer le jeu (en mode modal)
  close() {
    this.iframe.contentWindow.postMessage(
      { type: 'GAPILA_CLOSE' },
      'https://gapila.com'
    );
  }
}

// Utilisation
const game = new GapilaEmbed('gapila-iframe')
  .on('GAPILA_READY', (payload) => {
    console.log('Jeu chargé', payload);
  })
  .on('GAPILA_WIN', (payload) => {
    alert(`Félicitations ! Vous avez gagné : ${payload.prizeName}`);
  });

Envoyer des commandes

Vous pouvez envoyer des commandes à l'iframe :

GAPILA_REQUEST_SIZE

Demander la taille actuelle du contenu :

iframe.contentWindow.postMessage(
  { type: 'GAPILA_REQUEST_SIZE' },
  'https://gapila.com'
);

GAPILA_CLOSE

Signaler que le modal se ferme (optionnel) :

iframe.contentWindow.postMessage(
  { type: 'GAPILA_CLOSE' },
  'https://gapila.com'
);

Intégration Analytics

Google Analytics 4

window.addEventListener('message', function(event) {
  if (!event.origin.includes('gapila.com')) return;

  const { type, payload } = event.data;

  switch (type) {
    case 'GAPILA_READY':
      gtag('event', 'game_loaded', {
        game_id: payload.gameId,
        game_type: payload.gameType
      });
      break;

    case 'GAPILA_PARTICIPATION':
      gtag('event', 'game_participation', {
        game_id: payload.gameId,
        participant_id: payload.participantId
      });
      break;

    case 'GAPILA_WIN':
      gtag('event', 'game_win', {
        game_id: payload.gameId,
        prize_id: payload.prizeId,
        prize_name: payload.prizeName
      });
      break;
  }
});

Facebook Pixel

window.addEventListener('message', function(event) {
  if (!event.origin.includes('gapila.com')) return;

  const { type, payload } = event.data;

  if (type === 'GAPILA_PARTICIPATION') {
    fbq('track', 'Lead', {
      content_name: 'Gapila Game',
      content_category: payload.gameType
    });
  }

  if (type === 'GAPILA_WIN') {
    fbq('track', 'CompleteRegistration', {
      content_name: payload.prizeName
    });
  }
});

Auto-height

Pour que l'iframe s'ajuste automatiquement à la hauteur du contenu :

<iframe
  id="gapila-iframe"
  src="URL_EMBED"
  width="100%"
  style="border: none; min-height: 600px;">
</iframe>

<script>
window.addEventListener('message', function(event) {
  if (!event.origin.includes('gapila.com')) return;

  if (event.data.type === 'GAPILA_RESIZE') {
    document.getElementById('gapila-iframe').style.height =
      event.data.payload.height + 'px';
  }
});
</script>

Sécurité

Toujours vérifier l'origine des messages :

window.addEventListener('message', function(event) {
  // IMPORTANT : Vérifier l'origine
  const allowedOrigins = [
    'https://gapila.com',
    'https://www.gapila.com'
  ];

  if (!allowedOrigins.some(origin => event.origin.startsWith(origin))) {
    console.warn('Message ignoré - origine non autorisée:', event.origin);
    return;
  }

  // Traiter le message...
});

Prochaines étapes

• Sécurité - Bonnes pratiques de sécurité
• Dépannage - Résoudre les problèmes courants