URL Masking/Link Cloaking in Wappler

Wappler General How To
#1

I had a WordPress site that I am remaking that used URL masking/link cloaking for affiliate links. This is what I used at the time https://prettylinks.com/about/

I’m trying to figure out the best way to implement something similar on my Wappler site. The first way would be to just use routes like but I think I would have to redeploy the site any time I want to add a new link?

Is it possible to create a new route from an admin panel on the site or something similar?

Or is there any way to have the “redirect to” be dynamic and pull the link from the database or something?

I could set it up manually like https://technicalwall.com/affiliate-marketing/cloak-affiliate-links-without-plugin/ but I would still have the problem of not being able to make new links without editing the htaccess every time.

Does anyone have any experience with this sort of thing or any other ideas that might help?

#2

I don’t do anything with affiliate links but from what I understand you want to maintain a list of words that would be automatically changed to an affiliate link whenever they’re found in your site?

I’m not sure of a good Wappler way to do it, but you could maintain a list in a database and then do something like…

    var replacementDict = {
        'foo': 'http://www.foo.com/',
        'bar': 'http://www.bar.net/'
    };
    var theRegex = /\b(foo|bar)\b/g;
    theText.replace(theRegex, function(s, theWord) {
        return "<a href='" + replacementDict[theWord] + "'>" + theWord + "</a>";
    });

where the replacementDict is being pulled from your database table and theRegex is constructed to include the list of your words.

#3

What I want to do is make a link on my site ie https://mysite.com/go/link

and have that link go to a specific URL on another site ie https://somesite.com/MyReferralCode

and be able to have a link like mysite.com/go/site1 mysite.com/go/site2 etc for each website/referral link I want to link to on my site.

This is so I can change the link if needed but not have to change every instance on the site. As well as not have all the referral info in the link.

I can set this up easily in a route as shown in my initial post but if I want to add a new website/referral link I think I would have to set it up in Wappler and redeploy it.

So I would want to either be able to be able to create routes from the live site somehow or make it dynamic so it pulls the outgoing link from a database.

Would the code you provided work for that?

#4

You could create a database table to store things like:

id, slug, link
1, link, https://somesite.com/MyReferralCode

(the above is your 1st link example)

And then create a Server Action with a route on:

mysite.com/go/:link

And then Database Query SELECT * FROM links WHERE slug = $_PARAM.link (this is a pseudoquery, use Wappler’s UI to build the database query), and then use the Redirect step with the URL you obtain from the database

#5

Hmmm. That definitely makes it more complicated. There’s probably a better way.

#6

Second that you def want to wrap your ref links into a DB. Trying to redirect to a different domain purely via a route->server connect may throw certificate errors as well (CORS violation), as the http request will generate a response form a different domain (I ran into this problem a while back). Instead land to a blank page that reads your URL path by parts via a browser component and feed that to the DB to determine the output URL, and programmatically redirect on-page.

1 Like
#7

I think I may have it working.

I have a page called “go” with just a server connect and browser. The layout for the page includes a param called “slug”.

When the page loads it runs the server connect and sends the slug param as an input.

It searches the DB for an entry that matches the slug and returns the associated link.

The server connect component then runs a browser go to with a dynamic success event.

It uses the returned link as the go to target.

Is that the correct way to set it up or is there a better/easier way?

#8

You’ve literally described my implementation. (I just wrapped mine within an auto-run Page Flow, which is inconsequential). As far as I know, this is the most efficient route that also does not violate CORS policies and allows for on-the-fly adding/editing/removing ref links simply via DB DML from some other backend or direct querying. No re-deploy of the box everytime you need to edit a ref link.

For anyone else following, do note that the url links returned from the DB should be fully-qualified with the http(s):// protocol prefix. Otherwise the browser.goto will attempt to redirect to a file local on the server that matches the DB return by default instead.

1 Like