Hey Carlos, Webflow has jQuery installed as part of every hosted site, so tasks like this become easier. However your particular requirements have some challenges you’ll need to do some R&D to address.
You’ve basically got a two-part problem-
PART 1 - Find all of the external links in your page
Usually an external link can be identified by the fact that it is a fully-qualified URL, beginning with a scheme like http: or https:. Unfortunately, “local” links can also work that way, If your website is MYSITE.COM, nothing prevents you from having a link to https://mysite.com, so you need to avoid that or check for and prevent those. IIRC, in Webflow, there are certain places where the use of fully-qualified URLs is unavoidable, even to local pages.
Here’s how a basic jQuery select would work. This would select all A elements with an href that starts with http:
or https:
.
$("a[href^='http']") // external
Note that even if you pick up some local URLs, they’re probably no harm. It will look a bit weird if the user is watching the URL bar, but Webflow will ignore it, and you can simply ignore those ref stats in your analytics.
PART 2 - Change them all to add your querystring param
This is somewhat trickier, because there are a lot of different situations to confront, like;
- Does the URL already have a querystring or not?
- Does the current querystring already have a
ref
param, and if so what should the behavior be?
- Is there a #fragment, such as a hash or a text fragment following the querystring?
There are a ton of scripts, libraries, etc. on Stack Overflow, you’d need to figure out what behavior you want, and which browsers you want to support.
However personally I’d start here- there is a jQuery library that you can add into your project specifically for these types of manipulations-
https://plugins.jquery.com/query-object/