Evaluating bids

Re-writing external links with Javascript based on query parameters

Published on the May 23, 2024 in IT & Programming

About this project

Open

I'm looking to have a script created to help pass tracking variables into a URL parameter in external links.

Here's what I'm looking for. On the example site (this is not the exact site but it uses the same technology) it uses fareharbor.com as a 3rd party to handle the booking. The problem is that by default it does not pass any source data into the booking, so the client can't see where the bookings came from. There is some data in Google Ads and other sources, but it isn't something that can be passed to the individual booking due to the provider not supporting it.

https://www.gatewayclipper.com/sightseeing-cruises/three-rivers/

However, there is a reference field that I have figured out I can pass URLencoded data to and report on that in the booking system.

For example, on that page it loads this script URL:

https://fareharbor.com/embeds/script/calendar/gatewayclipper/items/15867/?fallback=simple&ref=https%3A%2F%2Fwww.gatewayclipper.com&language=en-us

That will then write a number of other stuff after the page is rendered, so those links would need to be changed.

However, I think if by passing the ref into the script before it loads, it will pass it to anything it creates downstream. This would need to be confirmed.

What I would like to do is this:
I want to dynamically change ref value in the fareharbor.com url based on url parameters either from cookies (1st priority if they exist, which would help it pass the data across the session and first-visit, etc) or 2nd priority from utm parameters or other specifically defined parameters in the url, which would then be set as cookies.

On mobile this behaves a bit different than desktop. On desktop they have what they call a "lightframe" which is just an overlay iframe based on various interaction with the site that and that iframe loads from the farehabor.com domain which I think that script initiates. On mobile on click it redirects the user to fareharbor.com since it can't iframe all this.

But in both cases it looks like it's passing the ref URL parameters.

There is a char limit for the ref value so I need to also shorten it and make sure it's max 125 chars. One huge issue is if it's over the char limit the checkout won't process the credit card, and there's no error handling. So it's really critical to keep under that limit.

So if someone came from google ads with the UTM parameters like utm_source=google&utm_medium=paid&keyword=boat%20tour those, along with the domain would become the ref in a single string like:
gatewayclipper.com-s_google_m_paid_k_boat-tour
s = source, m = medium, k= keywords, etc

It would also have to check for referer and presence of gclid and some other variables. Not all of these may exist and sometimes there may be others like campaign. I'd have to compile those in detail but just wanted to give you an overview.

I also have no dev site to test this on since it's all part of a hosted solution and I have limited access to what they are willing to implement. I can't add anything on fareharbor.com (including Google Tag Manager) so this is why I'm trying to pass it via their query string . I may have to implement the script via CDN hosting or Google Tag Manager.

It may be possible to copy the page and have it load either locally or on a test hosting platform.

Please let me know what questions or concerns you may have about this and a rough idea on the hours you expect it might take to create

Category IT & Programming
Subcategory Web development
What is the scope of the project? Small change or bug
Is this a project or a position? Project
I currently have I have specifications
Required availability As needed
Roles needed Developer

Delivery term: Not specified

Skills needed