URL del Referente con jQuery o Javascript - Problema de Caché y URL del Referente

Espero que alguien pueda ayudarme : )

Lo que estoy intentando hacer es obtener la URL del referente de la primera visita y enviarla al formulario. Usamos el plugin Contact Form 7, así que creé un campo oculto, obtengo la URL del referente y asigno ese valor del referente a ese campo oculto.

Todo funcionaba bien, hasta que habilité el caché.

Esta es la función que uso (en caso de que alguien la necesite)

function getRefererPage( $form_tag ){
    if(!isset($_COOKIE['external_referrer_cookie']))
    {

    }
    if ( $form_tag['name'] == 'referer-page' ) {
        $form_tag['values'][] = $_COOKIE['external_referrer_cookie'];
    }
    return $form_tag;
}
add_filter( 'wpcf7_form_tag', 'getRefererPage' );

Donde "referer-page" es el nombre y ID del campo oculto en el formulario de Contact Form 7.

Una vez que habilité el caché, tuve que pensar en una solución con Javascript o jQuery para establecer la cookie.

Agregué el jQuery Cookie Plugin (https://github.com/carhartl/jquery-cookie) y luego probé múltiples variaciones diferentes del código a continuación para crear una cookie y establecer el valor de la cookie.

Mi Objetivo es: Cuando el visitante del sitio web viene por primera vez, establecer el valor de la cookie en la URL del referente, pero luego mantener el valor, por ejemplo, si el visitante viene al sitio web desde google.com y luego se mueve por las páginas del sitio web, una vez que completa el formulario, el valor en el campo oculto debería seguir siendo la URL de Google con sus parámetros.

Este es el código JS que tengo ahora en el footer.php del tema.

jQuery(document).ready(function($){  // INICIO JQUERY PERSONALIZADO SIN CONFLICTO
    // $.cookie('mysite_referrer', document.referrer);
    // var initreferrer = document.referrer;
    // $.cookie('mysite_referrer', initreferrer);
    //console.log('cookie ref actual:'+$.cookie('external_referrer_cookie'));
    //console.log('prueba');
    $.cookie('external_referrer_cookie');
    if ($.cookie('external_referrer_cookie') == 'undefined' ) { 
        // console.log('estableciendo cookie para'+ document.referrer); 
        $.cookie('external_referrer_cookie', document.referrer);
        $('.wpcf7-text.referer-page').val($.cookie('wsg_external_referrer_cookie'));
        console.log('cookie ref actual:'+$.cookie('wsg_external_referrer_cookie'));
    }
    // $('#referer-page').val($.cookie('external_referrer_cookie'));
    console.log('cookie ref fuera de función:'+$.cookie('external_referrer_cookie'));

    /*
    var cookieName = 'cookietest';
    $(function() {
        checkCookie();
    });

    function checkCookie() {
        if (document.cookie.length > 0 && document.cookie.indexOf(cookieName + '=') != -1) {
                // no hacer nada, cookie ya enviada
        } else {
                // manejar animación jQuery

                // establecer la cookie para mostrar que el usuario ya visitó
                document.cookie = cookieName + "=1";
        }
    }
    */

}); // FIN JQUERY PERSONALIZADO SIN CONFLICTO

Como pueden ver en las líneas comentadas, probé muchos enfoques que encontré en varios tutoriales de sitios web. He estado luchando con esto durante un par de días, por favor ayuda : ))

Gracias