JavaScript apua tarvitaan - seurantakoodin lisääminen linkkeihin

Olisi tarvetta pienellä JavaScript-osaamiselle.

Yhteisölle erittäin tärkeä UpCloudin sopimus on loppumassa, kun ulkoistimme teknisen ylläpidon. Onneksi uusia kuvioita on löytynyt ja mahdollisesti toinen kotimainen erittäin laadukas kumppani, jonka kanssa homma voisi toimia yhtä hyvin. Tavoitteena on varmistaa toiminnan taloudelliset edellytykset, mutta välttää käyttökokemuksen pilaamista mainoksilla.

Mutta tämä kumpani vaatii klikkien seurantaa toimittamallaan koodilla/URL:lla, joka pitäisi joittaa tiettyjen ulos osoittavien linkkien eteen.

Eli linkit jotka ovat muotoa:

http://mahdollinenkumppani.fi/...

Pitäisi saada automaattisesti muotoon:

http://kumppanin-markkinointi.fi/käyttäjätunnus?url=https://mahdollinenkumppani.fi/...

Netissä on paljon koodiesimerkkejä, jossa JavaScriptillä lisätään parametreja linkkien perään, mutta niiden logiikkaa pitäisi muuttaa niin että haluttu koodi tulee linkin eteen. Tässä on yksi koodiesimerkki JSFiddlessa, joka lisää GOG kaupan kumppanikoodin linkin perään, eli sama tavoite mutta URLin rakenne ja logiikka erilainen. Ja temppu pitäisi saada aikaan puhtaalla JavaScriptilla, ilman jQuery tms. riippuvuuksia. Esimerkissä on myös varmistus ettei muutosta tehdä linkkeihin, joissa kumppanikoodi on jo - tämä on varmasti hyvä turvatarkistus.

Luultavasti muutos on varsin helppo tehdä, mutta JavaScript ei lukeudu omiin vahvuuksiin.

Tehtävänanto on hieman lavea, mutta menee ihan näin:

const prefix = 'http://kumppanin-markkinointi.fi/käyttäjätunnus?url=';
const link = 'http://mahdollinenkumppani.fi/asdasdasd';
const result = `${prefix}${link}`;
3 tykkäystä

Tuon fiddlen pohjalta jotakuinkin näin:

const affiliate = 'https://kumppanin-markkinointi.fi/tunnus';
const affiliate_links = document.querySelectorAll('a[href*="mahdollinenkumppani.fi"]');

affiliate_links.forEach(function(el) {
    if (!el.href.startsWith(affiliate)) {
        el.href = affiliate + '?url=' +  encodeURIComponent(el.href);
    }
})
4 tykkäystä

Aivan loistavaa. Pienellä jatkokehityksellä tästä syntyi:

<script type="text/discourse-plugin" version="0.8.42">
api.decorateCookedElement(
  element => {
        const affiliate = 'https://kumppanin-markkinointi.fi/tunnus...';
        const affiliate_links = element.querySelectorAll('a[href*="mahdollinenkumppani.fi"]');

        affiliate_links.forEach(function(el) {
            if (!el.href.startsWith(affiliate)) {
                el.href = affiliate +  encodeURIComponent(el.href);
            }
        });
    },
  {
    onlyStream: true
  }
);
</script>
4 tykkäystä

Tiedoksi ja avoimuuden nimissä - tämä on nyt “hiljaisessa” teknisessä testauksessa. Nokkelat saattavat sen huomata, mutta loppukäyttäkokemukseen sen ei pitäisi vaikuttaa millään tavalla.

Olen ja ollaan hetki asiasta hissukseen. Tiedotan sitten kyllä isolla, jos tämä menee maaliin.

2 tykkäystä