29 août 20263 min de lecture

Ads natives dans un chat Vue / Nuxt

Monétiser une UI chat avec le composable useIdlenAd. Vue 3 et Nuxt 4. 70% de rev share, sans modifier le modèle.

Résumer avec l'IA ChatGPT Claude Perplexity Gemini

Ads natives dans un chat Vue / Nuxt

Le SDK a un composable Vue. Pas besoin de React, pas d’onboarding enterprise.

useIdlenAd (@idlen/chat-sdk/vue) récupère une ad contextuelle après le message user et vous donne du HTML ou du markdown à placer sous la réponse assistant. Même 70 % de rev share, même serve < 50 ms.

Next / AI SDK : guide 10 minutes. Onglets : SDK.

Install

npm install @idlen/chat-sdk

Clé publisher : Ads Manager → idl_pk_…. En Nuxt, seulement la clé publishable en NUXT_PUBLIC_IDLEN_PK.

Composant Vue 3

<script setup>
import { useIdlenAd } from "@idlen/chat-sdk/vue";

const props = defineProps(["message", "sessionId"]);
const { ad, fetchAd, trackClick } = useIdlenAd({
  apiKey: "idl_pk_your_key_here",
});

watch(
  () => props.message,
  (msg) => {
    fetchAd({
      rawText: msg,
      sessionId: props.sessionId,
      format: "chat_sponsored_recommendation",
    });
  },
);
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <a v-if="ad" :href="ad.ctaUrl" @click="trackClick">
      <div v-html="ad.renderHTML()" />
    </a>
  </div>
</template>

L’ad est une sœur du message, pas une réécriture du modèle. v-html = render SDK. Ne le concaténez pas dans le prompt.

Nuxt 4

Même composable. Client only, ou import.meta.client autour de fetchAd.

import { useIdlenAd } from "@idlen/chat-sdk/vue";

const config = useRuntimeConfig();
const { ad, fetchAd, trackClick } = useIdlenAd({
  apiKey: config.public.idlenPublisherKey,
});

Si le chat passe par server/api/chat.post.ts, appelez @idlen/chat-sdk/server là et envoyez le payload au client. Ne bloquez pas le modèle.

import { IdlenChatAds } from "@idlen/chat-sdk/server";

const ads = new IdlenChatAds({
  apiKey: process.env.IDLEN_PUBLISHER_KEY,
});

const ad = await ads.getAd({
  rawText: assistantText,
  sessionId,
  format: "chat_sponsored_recommendation",
});