Link rewriting for affiliate codes

Sí, es posible. Empecemos con algo sencillo. Primero, añade esto a la pestaña de encabezado de un nuevo componente de tema.

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

</script>

¿Qué hace esto? Es un tipo especial de etiqueta script que es manejada por Discourse. ¿Cuál es la ventaja? Te permite acceder a los métodos de la API de plugins.

Quieres agregar un código de afiliado a algunos enlaces. Eso significa que deseas modificar el contenido de las publicaciones. Si revisas la API de plugins, verás que existe un método para ello.

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

Se usa de la siguiente manera.

api.decorateCookedElement(
  element => {
    // realiza tu trabajo aquí.
    // el elemento pasado aquí es el nodo HTML de la publicación procesada
  },
  {
    // las opciones van aquí
  }
);

Este es el contenedor que necesitas para envolver tu código y que se ejecute cuando se renderiza una publicación. Así que intentémoslo.

Tomamos tu código y lo añadimos tal cual.

api.decorateCookedElement(
  element => {
++  // Cambia "my-affiliate-id" a continuación por tu ID de afiliado real
++  const aid = "my-affiliate-id";
++
++  // Agrega la barra con el ID de afiliado, solo si aún no se encuentra un ID de afiliado en el enlace
++  const goglinks = document.querySelectorAll('a[href*="gog.com"]');
++  goglinks.forEach(function (el) {
++    if (!el.href.includes("pp=")) {
++      el.href = el.href.replace(/\?.*$/, "") + "?pp=" + aid;
++    }
++  });
  },
  {
    // las opciones van aquí
  }
);

¿Esto funciona? Sí, pero también realiza trabajo redundante ya que estamos consultando el document para obtener los enlaces en lugar del elemento de la publicación. Entonces, ¿cómo lo solucionamos?

¿Recuerdas el argumento element que pasamos en el método? Bueno, aquí es cuando resulta útil.

En lugar de consultar el documento, consultamos el elemento que queremos dirigir. Así que cambiamos esto.

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

por esto

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

y esto es lo que obtenemos al final.

api.decorateCookedElement(
  element => {
    // Cambia "my-affiliate-id" a continuación por tu ID de afiliado real
    const aid = "my-affiliate-id";

    // Agrega la barra con el ID de afiliado, solo si aún no se encuentra un ID de afiliado en el enlace
--  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;
      }
    });
  },
  {
    // las opciones van aquí
  }
);

Ahora funciona muy bien, pero aún podemos mejorarlo un poco. Como solo estás agregando un ID de afiliado a los enlaces, no necesitas que esto se ejecute cuando estás en el editor. Ahí es donde entran las opciones del método.

Una de las opciones que puedes pasar al método es onlyStream.

¿Qué hace? Le indica al método que solo deseas que este código se ejecute cuando la publicación se renderiza dentro de un tema. Agreguemos esa opción.

api.decorateCookedElement(
  element => {
    // Cambia "my-affiliate-id" a continuación por tu ID de afiliado real
    const aid = "my-affiliate-id";

    // Agrega la barra con el ID de afiliado, solo si aún no se encuentra un ID de afiliado en el enlace
    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
  }
);

Así que ahora lo único que queda por hacer es colocar este código en la etiqueta script especial de la que hablamos antes.

<script type="text/discourse-plugin" version="0.8.42">
api.decorateCookedElement(
  element => {
    // Cambia "my-affiliate-id" a continuación por tu ID de afiliado real
    const aid = "my-affiliate-id";

    // Agrega la barra con el ID de afiliado, solo si aún no se encuentra un ID de afiliado en el enlace
    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>

Luego, agrégalo a la pestaña de encabezado de tu componente y ya estarás listo. Usé GOG en este ejemplo porque eso es lo que preguntaste, pero este patrón puede usarse para cualquier programa de afiliados siempre que conozcas la estructura de la URL.

11 Me gusta