Capture referral/affiliate info on the URL for donations

[yoked2000]

I am trying to be able to track where donations are coming from, for example different sources, campaigns or people. We have various membership levels we just need to know what is driving them. Possibly use hidden fields add the URL code, URL code to invoice number or maybe Active Campaign.
Currently our organization set up a duplicate form for each referrer but that is a lot of overhead and duplication. I'm curious if there is a better way like the Custom Form Fields [https://givewp.com/documentation/developers/how-to-create-custom-form-fields/]
We would like to be able to send donations to the same form but know where they come from. Also, curious if hidden fields would persist to each renewal payment of a subscription.
Looking for the most elegant way to accomplish this. Ideally it would be great if this functionality were built in to Give and reporting to go with it, like form totals per referral tag, etc.
The only thing I could think of would be to populate the invoice number or hidden field from the URL code, but that causes other issues with invoice numbers crossing different subscriptions and we use the invoice number already.
Any suggestions would be much appreciated.

I tried creating a hidden field called "referral" on the form then using the below snippet but I have something wrong with the snippet.

add_action( 'give_donation_form_after_submit', function() { ?>
//add script tag here
let searchParams = new URLSearchParams(window.location.search);
// Change the parameter name here
let referralSource = searchParams.has('referral') ? searchParams.get('referral') : '';
// Change the target variable here
jQuery("input[name='referral']").prop("value", referralSource);
//close script tag here

[kjohnson]

Hey @yoked2000. I would agree with your direction of populating a hidden field. Looking at the script, you may need to manually trigger a change event - I'm not sure of jQuery does that when changing the value as a .prop() change.

[yoked2000]

Hey Kyle -
First thanks for the response.
Rick supplied me a snippet but it seems like I'm having a caching issue or something else is going on.
I added a hidden field to a form called "referral". The snippet should grab the parameter from the URL and simply update the value of the hidden field if it exists. Easy peezy you'd think. He sent me a video of the process but for whatever reason it doesn't work on my site https://somup.com/c3V1qhZj9Y
Problems:

1. When I examine the page with developer tools, the hidden field isn't always there, but a field I removed previously is still there, even after I CTRL+F5 refresh the form. Thinking caching here.
2. Even if the field does show up eventually the value never gets set.
3. the hidden field only shows up when the form is published public, private it doesn't show up. Weird or normal behavior?
4. thinking this part refInput.length > 0 should be checking the length of the value, not the length of the hidden field. Just saw this.

Here's the snippet. It seems pretty straightforward and a variation of the email, fist name, last name snippet already int the library:

function givewp_get_referral_from_url() {
?>
<script>
( function( window, document, $, undefined ) {
'use strict';
var giveCustom = {};

		giveCustom.init = function() {

			// Are we passed a form ID?
			var form_id = giveCustom.getQueryVariable( 'form_id' ) !== false ? decodeURI( giveCustom.getQueryVariable( 'form_id' ) ) : '';

			if ( form_id !== '' ) {
				// Make to jQuery object.
				var giveForm = $( '.give-form' + giveCustom.getQueryVariable( 'form_id' ) )
			} else {
				// Fallback.
				giveForm = $( '.give-form' );
			}


			var refValue = giveCustom.getQueryVariable( 'ref' ) !== false ? decodeURIComponent( giveCustom.getQueryVariable( 'ref' ) ) : '';

			var refInput = giveForm.find( 'input[name="referral"]' );

			if ( refValue !== false && refInput.length > 0 ) {
				refInput.val( refValue );
			}
			
		};

		/**
		 * Get Query Variable from URL.
		 *
		 * @param variable
		 * @returns {string|boolean}
		 */
		giveCustom.getQueryVariable = function( variable ) {
			var query = window.location.search.substring( 1 );
			var vars = query.split( '&' );
			for ( var i = 0; i < vars.length; i ++ ) {
				var pair = vars[ i ].split( '=' );
				if ( pair[ 0 ] == variable ) {
					return pair[ 1 ];
				}
			}
			return false;
		};

		giveCustom.init();

	} )( window, document, jQuery );
</script>
<?php

}

add_action( 'give_post_form_output', 'givewp_get_referral_from_url' );

[kjohnson]

@yoked2000 I updated my answer below, see #6517 (comment).

From what I can tell, you don't need to add a hidden field as the value is already stored on the donation.

As a side note, we are working on releasing a Fields API which will make adding new fields to the form much easier.

[kjohnson]

@yoked2000 looking through our feedback channel, it looks like we are already capturing the URL from which the donation form was loaded. The referrer URL is stored as donation meta. The catch is that it isn't displayed anywhere. Here is a snippet for displaying the referrer URL for a donation, see https://feedback.givewp.com/feature-requests/p/show-current-page-in-donation-meta.

This also means that previous donations should already have this value captured 😎