Link rewriting for affiliate codes

Oui, c’est possible. Commençons par quelque chose de simple. Tout d’abord, ajoutez ceci dans l’onglet En-tête d’un nouveau composant de thème.

<script type="text/discourse-plugin" version="0.8.42">

</script>

À quoi cela sert-il ? Il s’agit d’un type spécial de balises script gérées par Discourse. Quel est l’avantage ? Cela vous permet d’accéder aux méthodes de l’API des plugins.

Vous souhaitez ajouter un code d’affiliation à certains liens. Cela signifie que vous voulez modifier le contenu des messages. Si vous consultez l’API des plugins, vous verrez qu’il existe bien une méthode pour cela.

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js#L224-L262

Vous l’utilisez de la manière suivante.

api.decorateCookedElement(
  element => {
    // effectuez vos opérations ici. 
    // l'élément passé ici est le nœud HTML du message rendu
  },
  {
    // les options vont ici
  }
);

C’est l’enveloppe dans laquelle vous devez placer votre code pour qu’il s’exécute lorsqu’un message est rendu. Essayons donc cela.

Nous prenons votre code et l’ajoutons tel quel.

api.decorateCookedElement(
  element => {
++  // Remplacez "my-affiliate-id" ci-dessous par votre véritable identifiant d'affiliation
++  const aid = "my-affiliate-id";
++
++  // Ajoutez le slash avec l'identifiant d'affiliation, uniquement si un identifiant d'affiliation n'est pas déjà présent dans le lien
++  const goglinks = document.querySelectorAll('a[href*="gog.com"]');
++  goglinks.forEach(function (el) {
++    if (!el.href.includes("pp=")) {
++      el.href = el.href.replace(/\?.*$/, "") + "?pp=" + aid;
++    }
++  });
  },
  {
    // les options vont ici
  }
);

Cela fonctionne-t-il ? Oui, mais cela effectue également des tâches redondantes puisque nous interrogeons le document pour les liens au lieu de l’élément du message. Alors, comment corriger cela ?

Rappelez-vous l’argument element que nous avons passé dans la méthode ? Eh bien, c’est là qu’il devient utile.

Au lieu d’interroger le document, nous interrogeons l’élément que nous souhaitons cibler. Nous modifions donc ceci :

const goglinks = document.querySelectorAll('a[href*="gog.com"]');

en ceci :

const goglinks = element.querySelectorAll('a[href*="gog.com"]');

et voici ce que nous obtenons finalement :

api.decorateCookedElement(
  element => {
    // Remplacez "my-affiliate-id" ci-dessous par votre véritable identifiant d'affiliation
    const aid = "my-affiliate-id";

    // Ajoutez le slash avec l'identifiant d'affiliation, uniquement si un identifiant d'affiliation n'est pas déjà présent dans le lien
--  const goglinks = document.querySelectorAll('a[href*="gog.com"]');
++  const goglinks = element.querySelectorAll('a[href*="gog.com"]');
    goglinks.forEach(function (el) {
      if (!el.href.includes("pp=")) {
        el.href = el.href.replace(/\?.*$/, "") + "?pp=" + aid;
      }
    });
  },
  {
    // les options vont ici
  }
);

Cela fonctionne très bien maintenant, mais nous pouvons encore l’améliorer un peu. Puisque vous ajoutez uniquement un identifiant d’affiliation aux liens, vous n’avez pas besoin que cela s’exécute lorsque vous êtes dans l’éditeur de message. C’est là que les options de la méthode deviennent utiles.

L’une des options que vous pouvez passer à la méthode est onlyStream.

À quoi cela sert-il ? Cela indique à la méthode que vous ne souhaitez que ce code s’exécute lorsque le message est rendu à l’intérieur d’un sujet. Ajoutons cette option.

api.decorateCookedElement(
  element => {
    // Remplacez "my-affiliate-id" ci-dessous par votre véritable identifiant d'affiliation
    const aid = "my-affiliate-id";

    // Ajoutez le slash avec l'identifiant d'affiliation, uniquement si un identifiant d'affiliation n'est pas déjà présent dans le lien
    const goglinks = element.querySelectorAll('a[href*="gog.com"]');
    goglinks.forEach(function (el) {
      if (!el.href.includes("pp=")) {
        el.href = el.href.replace(/\?.*$/, "") + "?pp=" + aid;
      }
    });
  },
  {
++  onlyStream: true
  }
);

Donc, maintenant, la seule chose qui reste à faire est de placer ce code dans la balise script spéciale dont nous avons parlé plus tôt.

<script type="text/discourse-plugin" version="0.8.42">
api.decorateCookedElement(
  element => {
    // Remplacez "my-affiliate-id" ci-dessous par votre véritable identifiant d'affiliation
    const aid = "my-affiliate-id";

    // Ajoutez le slash avec l'identifiant d'affiliation, uniquement si un identifiant d'affiliation n'est pas déjà présent dans le lien
    const goglinks = element.querySelectorAll('a[href*="gog.com"]');
    goglinks.forEach(function (el) {
      if (!el.href.includes("pp=")) {
        el.href = el.href.replace(/\?.*$/, "") + "?pp=" + aid;
      }
    });
  },
  {
    onlyStream: true
  }
);
</script>

Ensuite, ajoutez-le dans l’onglet En-tête de votre composant, et vous êtes prêt. J’ai utilisé GOG dans cet exemple car c’est ce dont vous m’avez parlé, mais ce modèle peut être utilisé pour n’importe quel programme d’affiliation tant que vous connaissez la structure de l’URL.

11 « J'aime »