Pass utm on click in Landing Page

[EMaya7]

We implemented the code in the head HTML according to your guidance with a slight change:

<script>
// Function to capture and apply UTM parameters to outgoing links
function applyUTMParameters() {
const params = new URLSearchParams(window.location.search);

// Get the value of the 'source' query parameter
const source = params.get('ref');
const ad_id = params.get('ad_id');

//var source = '{{ request.query_string.ref }}'; // Get the ref parameter
//var ad_id = '{{ request.query_string.ad_id }}'; // Get the 'ad_id' parameter

// Find and update outgoing button links
var buttons = document.querySelectorAll('div.button.secondary a');

// Replace 'button-class' with your actual button class
buttons.forEach(function(button) {
var href = button.getAttribute('href');
href += (href.includes('?') ? '&' : '?') + 'ref=' + source + '&ad_id=' + ad_id;
button.setAttribute('href', href);
});
}
// Call the function when the page loads
window.addEventListener('DOMContentLoaded', applyUTMParameters);
</script>

BUT the problem is that it works on a button from type button and NOT on type CTA.
I need to work with CTA otherwise I dont see clicks on the reporting.

I need a solution that both reporting and passing UTM works. can someine pls guide me how to update the code? Did anyone expereince this issue before? How do you track UTMs from HubSpot pages?

Also, we attempted to try alone, we figured that is seems a timing issue that hsCtaTracking is overriding the applyUTMParameters function.

[EMaya7]

 Hi Jaycee, thanks for your reply.
The set timeout is actually what we tried, but it still didnt work, the function was never acalled.

Your suggestion on mutation observers was a good idea but it enetered a never ending loop and still didnt pass the utms even if we tried to limit it to 3 times.

Do you mayb know if HubSpot is tracking clicks on buttons? maybe that will solve this.

[Jaycee_Lewis]

Hey, there! Were you able to get this resolved?

If not, have you tried using setTimeout to delay the execution of your function? It may not be an efficient way to approach this.

One other bit of documentation I came across is trying to implement a Mutation Observer. To detect and run your code as soon as the CTA elements are loaded.

Best,

Jaycee