Sì, è possibile. Iniziamo con qualcosa di semplice. Prima di tutto, aggiungi questo alla scheda Intestazione di un nuovo componente del tema.
<script type="text/discourse-plugin" version="0.8.42">
</script>
Cosa fa? Si tratta di un tipo speciale di tag script gestiti da Discourse. Qual è il vantaggio? Consente di accedere ai metodi dell’API dei plugin.
Vuoi aggiungere un codice affiliato ad alcuni link. Questo significa che devi modificare il contenuto dei post. Se controlli l’API dei plugin, vedrai che esiste effettivamente un metodo per farlo.
Lo utilizzi in questo modo.
api.decorateCookedElement(
element => {
// esegui qui le tue operazioni.
// l'elemento passato qui è il nodo HTML del post elaborato
},
{
// le opzioni vanno qui
}
);
Questo è il contenitore in cui devi inserire il tuo codice affinché venga eseguito quando un post viene renderizzato. Proviamo quindi.
Prendiamo il tuo codice e lo aggiungiamo così com’è.
api.decorateCookedElement(
element => {
++ // Sostituisci "my-affiliate-id" qui sotto con il tuo vero ID affiliato
++ const aid = "my-affiliate-id";
++
++ // Aggiungi lo slash con l'ID affiliato solo se non è già presente nel link
++ const goglinks = document.querySelectorAll('a[href*="gog.com"]');
++ goglinks.forEach(function (el) {
++ if (!el.href.includes("pp=")) {
++ el.href = el.href.replace(/\?.*$/, "") + "?pp=" + aid;
++ }
++ });
},
{
// le opzioni vanno qui
}
);
Funziona? Sì, ma sta anche eseguendo del lavoro ridondante, poiché stiamo interrogando il document per i link invece dell’elemento del post. Come si risolve questo problema?
Ricordi l’argomento element che abbiamo passato nel metodo? Ecco quando diventa utile.
Invece di interrogare il documento, interroghiamo l’elemento che vogliamo targettizzare. Quindi, cambiamo questo.
const goglinks = document.querySelectorAll('a[href*="gog.com"]');
in questo
const goglinks = element.querySelectorAll('a[href*="gog.com"]');
e ecco cosa otteniamo alla fine.
api.decorateCookedElement(
element => {
// Sostituisci "my-affiliate-id" qui sotto con il tuo vero ID affiliato
const aid = "my-affiliate-id";
// Aggiungi lo slash con l'ID affiliato solo se non è già presente nel link
-- 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;
}
});
},
{
// le opzioni vanno qui
}
);
Ora funziona perfettamente, ma possiamo ancora migliorarlo un po’. Dato che stai solo aggiungendo un ID affiliato ai link, non hai bisogno che questo codice venga eseguito quando sei nell’editor. È qui che entrano in gioco le opzioni del metodo.
Una delle opzioni che puoi passare al metodo è onlyStream.
Cosa fa? Indica al metodo che vuoi che questo codice venga eseguito solo quando il post viene renderizzato all’interno di un argomento. Aggiungiamo quell’opzione.
api.decorateCookedElement(
element => {
// Sostituisci "my-affiliate-id" qui sotto con il tuo vero ID affiliato
const aid = "my-affiliate-id";
// Aggiungi lo slash con l'ID affiliato solo se non è già presente nel link
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
}
);
Quindi, ora l’unica cosa da fare è inserire questo codice nel tag script speciale di cui abbiamo parlato prima.
<script type="text/discourse-plugin" version="0.8.42">
api.decorateCookedElement(
element => {
// Sostituisci "my-affiliate-id" qui sotto con il tuo vero ID affiliato
const aid = "my-affiliate-id";
// Aggiungi lo slash con l'ID affiliato solo se non è già presente nel link
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>
Poi aggiungilo alla scheda Intestazione del tuo componente e sei a posto. Ho usato GOG in questo esempio perché era quello che mi hai chiesto, ma questo schema può essere utilizzato per qualsiasi programma di affiliazione, purché tu conosca la struttura dell’URL.