utm params in hash, custom ref setting

[maximeg]

Sometimes, utm params are used in the hash part of the URL, not to mess with SEO among other things:

https://my-website.com/#utm_source=twitter

Sometimes, you calculate and validate a source on the website/webapp and want to report it to the tracker.

Currently, as per the code I looked yesterday, the utm_xxx, ref, etc... params are derived server side from the query string.
It would be nice to have a way to report those params from the javascript tracker, having the server side derivation as a fallback.
This would allow heavy customization.

As an example, for the https://my-website.com/#utm_source=twitter case, I like to remove those params from the hash once the page is loaded to clean things for the user.

Note that an acceptable way of doing things is to switch to manual tracking of pageviews (i.e. not use enableAutoPageviews), and altering the URL sent. It's one of the "official" ways of customizing GA for example.

I've seen that it is currently possible as everything in the eventData payload can be overridden:

trackPageview({ url: "my:https://custom/url" });

So one can can alter the URL reported and manually add some utm_source params or else to the query string (as query string is ignored in Plausible).

So the good news is that nothing has to be developed for this set of customization to work at first, and we can just improve the documentation.

[metmarkosaric]

thanks @maximeg! how can utm tags mess with SEO?

[maximeg]

By having them in the query string, you end up with different URLs for the same page which ends up in duplicate content. By setting the rel="canonical" meta tag, it is mitigated for 99% of cases I think.

But you have other side effects, like the "read" status of links. Browser through its history would "color" links differently if you have extra query params that should be in practice ignored. But it can only know after the fact by reading the canonical URL in the page source (if set).

As a matter of fact, I dug into this a little bit while building a side project of mine (https://www.readshack.com). Here are the params I "pre-ignore" while canonizing URL:

  TRACKING_QUERY_PARAMS = [
    # sessions
    "sessionID",
    "token",

    # Google/Urchin
    /\Autm_/,

    # ConvertKit
    "ck_subscriber_id",

    # HubSpot
    "__hssc",
    "__hstc",
    "_hsenc",
    "_hsmi",
    "hsCtaTracking",

    # AMP
    "amp",
    "__twitter_impression",

    # Misc
    "hn",
    "pu",
    { "mod" => "rsswn" },
    # "ref", # todo: exclude if amazon
  ].freeze

URL 😅

[metmarkosaric]

Ok thanks for explaining. Is this because you use UTM and other tags on internal links?

[maximeg]

no, only for external links pointing to my site.

[ukutaht]

A manual mode is definitely something we plan to add so you can run arbitrary JS and send the pageview manually. This should allow a bunch of non-standard cases like this.

I'm curious how common this hash-based UTM approach is. Sounds like it's quite rare which makes it unlikely to make it into the Plausible product itself.

[fili]

Sorry, just seeing this now. As an ex-Google engineer, I can confirm this is a great feature to have.

To illustrate this is a pretty common situation - use-cases also touch on SPAs etc. As you can see in documentation here Google analytics also scans the fragment (a.k.a. anchor) for the UTM tags, and allows disabling this feature. And this is not a new feature.

And even though it is flagged as "not recommended" in an official Google UTM builder tool, it is one of the options they support. It would be great to see this also with plausible.

Hope this helps!

[fili]

@ukutaht with the manual option now described in #177 is it possible to send the pageview with utm_* tags from the fragments?

For example, with GA (which anyways already support this natively) we can also set a specific utm tag when registering the pageview.

if(window.location.hash.indexOf('utm_source') > -1){ga('set', 'campaignSource', window.location.hash.replace('#utm_source=', ''));}

Can we do a similar thing with the manual option now? Capturing (and looping through) the tracking utm_* from the fragment is something that can be done outside plausible, if we can then set it as a parameter and then send it to plausible without changing this URL.

[ukutaht]

Yes you could write a function that transforms the UTM paramaters from a hash fragment to query params.

So if you have a url like https://domain.com/page#utm_source=source then you could write a function that transforms it into https://domain.com/page?utm_source=source. When you send this with the manual option like so:

plausible('pageview' {u: 'https://domain.com/page?utm_source=source'})`

This will be picked up by the backend correctly

[fili]

something like this would work?

<!-- trigger pageview -->
<script>
  function prepareUrl() {
    if(window.location.hash.indexOf('utm_') > -1 || window.location.hash.indexOf('ref=') > -1 || window.location.hash.indexOf('source=') > -1) {
      fragmentParams = window.location.hash.substring(1)
      const url = new URL(location.href)
      if (url.search) {
        return url.origin + url.pathname + url.search + '&' + fragmentParams
      } else {
        return url.origin + url.pathname + '?' + fragmentParams
      }
    } else {
      return location.href
    }
  }    
  plausible('pageview', { u: prepareUrl() })
</script>

[fili]

Here is a second version, while preserving any fragments which are not defined as tracking params in plausible:

<!-- trigger pageview -->
<script>
  function prepareUrl() {
    if(window.location.hash.indexOf('utm_') > -1 || window.location.hash.indexOf('ref=') > -1 || window.location.hash.indexOf('source=') > -1) {
      const fragmentParams = window.location.hash.substring(1)
      const url = new URL(location.href)
      let customUrl = url.origin + url.pathname
      const fragmentTracking = []
      const fragmentRemaining = []
      for (let param of fragmentParams.split('&')) {
        if (param.startsWith('utm_') || param.startsWith('source=') || param.startsWith('ref=')) {
          fragmentTracking.push(param)
        } else {
          fragmentRemaining.push(param)
        }
      }
      if (url.search) {
        customUrl = customUrl + url.search + '&' + fragmentTracking.join('&')
      } else {
        customUrl = customUrl + '?' + fragmentTracking.join('&')
      }
      if (fragmentRemaining) {
        customUrl = customUrl + '#' + fragmentRemaining.join('&')
      }
      return customUrl
    } else {
      return location.href
    }
  }    
  plausible('pageview', { u: prepareUrl() });
</script>

Obviously this can still be further improved, but leaving it here so others can use it (or maybe it can be added to the documentation). Also obviously when minified this will be a lot shorter.