Send UTM Cookies to Marketo with click event

[ultraloveninja]

I've been working on trying to get UTM cookie values to send to Marketo when someone clicks a link.
It's similar to this issue that was posted awhile ago. There are some situations where a user will navigate to a separate page and then drop the UTM's from the URL. So we are trying to capture those from the cookies and then send them to Marketo via a JavaScript click event. I've been reading and testing using the munchkin clickLink function, but I'm not sure that it's sending correctly.

I've been reading up on some items here an there, but I haven't been able to find much around the clickLink within this specific scenario. I'm wondering if this is possible to do without needing to use a hidden form of some sort.

[SanfordWhiteman]

If you don’t show the code and a page it’s running on it’s hard to imagine how anyone can help here.

Broadly speaking, loading values from cookies and sending them in a custom Munchkin hit is easy, but I question whether you should do it this way as opposed to adding the stored values to every link so the standard Munchkin hit covers it. Otherwise you always get a second hit.

[ultraloveninja]

Sorry about that. Here's the code that I've been testing:

//TO SEND TO MARKETO
// Function to read a cookie's value by name
function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

// Function to track a link click with UTM parameters from cookies
function trackLinkClickWithUTMFromCookies(linkId) {
  // Capture UTM parameters from cookies
  var utm_source = getCookie('utm_source');
  var utm_medium = getCookie('utm_medium');
  var utm_campaign = getCookie('utm_campaign');
  var utm_term = getCookie('utm_term');
  var utm_content = getCookie('utm_content');

  // Use the Munchkin clickLink function to send the event with UTM parameters
  Munchkin.munchkinFunction('clickLink', {
    href: linkId,
    // Include UTM parameters in the data sent to Marketo
    utm_source: utm_source,
    utm_medium: utm_medium,
    utm_campaign: utm_campaign,
    utm_term: utm_term,
    utm_content: utm_content
  });
}

// Example usage: Add event listener to a link
var myLink = document.getElementById('myLink');
myLink.addEventListener('click', function() {
  trackLinkClickWithUTMFromCookies(this.id);
});

I've been testing this on a development page, but it's behind a firewall so I won't be able to share the page directly. I might be able to put this into a pen if needed.

[SanfordWhiteman]

The clickLink event only supports the href property. You put everything in the href as you would in a standard <a> tag.

[ultraloveninja]

Can you elaborate on that a bit? From other posts I was reading, I thought it would be possible to do something like this (taken from this post)

document.querySelector('#myButtonId').addEventListener('click', function(e){

  Munchkin.munchkinFunction('clickLink', { /* ... click link options here... */ );

});

Which I feel from what you are saying that rolling everything up into a separate function or variable like this:

// Function to track a link click with UTM parameters from cookies
function trackLinkClickWithUTMFromCookies(linkId) {
  var utm_source = getCookie('utm_source');
  var utm_medium = getCookie('utm_medium');
  var utm_campaign = getCookie('utm_campaign');
  var utm_term = getCookie('utm_term');
  var utm_content = getCookie('utm_content');

  Munchkin.munchkinFunction('clickLink', {
    href: linkId,
    utm_source: utm_source,
    utm_medium: utm_medium,
    utm_campaign: utm_campaign,
    utm_term: utm_term,
    utm_content: utm_content,
  });
}

// Example usage: Add event listener to a link
var myLink = document.getElementById('myLink');
myLink.addEventListener('click', function() {
  trackLinkClickWithUTMFromCookies(this.id);
});

Won't technically work? I'm fuzzy on how direct I would need to be with the clickLink function.

[SanfordWhiteman · Accepted solution]

I’m saying the function takes an object with one property:

  Munchkin.munchkinFunction('clickLink', {
    href: thisIsTheOnlySupportedProperty
  });

You don’t add query params as their own properties.

[ultraloveninja]

Ahhhh, ok. So if I'm understanding correctly, all of this currently:

  Munchkin.munchkinFunction('clickLink', {
    href: linkId,
    utm_source: utm_source,
    utm_medium: utm_medium,
    utm_campaign: utm_campaign,
    utm_term: utm_term,
    utm_content: utm_content
  });

Won't work, but this will:

  Munchkin.munchkinFunction('clickLink', {
    href: linkId,
  });

Correct?

[SanfordWhiteman]

Yes. What you pass as the href is the full URL (just as with a standard href HTML attribute).