Paradox > Dynamic Outbound Links

Local development

1. yarn install
2. yarn develop
3. http://localhost:3000/example.html

Testing the build

1. yarn serve
2. http://localhost:5000/example.html

Usage in production

Install yarn install @oddcamp/pdx-dol and

  import PdxDol from "@oddcamp/pdx-dol"

  const pdxdol = new PdxDol()
  pdxdol.start()

By default it tracks these parameters:

  utm_source
  utm_medium
  utm_campaign
  utm_term
  utm_content

Options

PdxDol function accepts an object of the following global options (some of them have the default values set):

  excludeSelector: `.js--pdxdol-exclude`
  includeSelector: ``
  params: {}

How it works

PdxDol intercepts link clicks and adds the configured parameters to URL of an outbound link.

You can set the global parameters that are appended to all outbound links, e.g.:

  PdxDol({
    params: {
      utmSource: `source`,
      utmMedium: `medium`,
      utmCampaign: `campaign`,
      utmTerm: `term`,
      utmContent: `content`,
    },
  })

However, the parameters set via PdxDol may be overriden by window.location parameters that are stored in sessionStorage and used throughout the session.

You can alter a global parameter for a specific link by using data-* attribute(s) e.g.:

  <a href="https://www.google.com" data-utm-medium="another-medium">Link</a>

The user is then redirected to:

  https://www.google.com?utm_source=source&utm_medium=another-medium

You can exclude an outbound link or multiple links from being intercepted by using excludeSelector attribute. Let's use the default one, e.g.:

  <a href="https://www.google.com" class="js--pdxdol-exclude">Excluded</a>

  <p class="js--pdxdol-exclude">
    <a href="https://www.google.com">Excluded</a>
    <a href="https://www.google.com">Excluded</a>
  </p>

Or you can change the utility behaviour from include-all to exclude all by by using includeSelector that only tracks the matching link clicks. If both are set includeSelector supersedes excludeSelector.

As mentioned above, the utility tracks UTM parameters by default. But you can also append a custom trackable parameters, e.g.:

  PdxDol({
    params: {
      customParam1: ``,
      customParam2: `has-a-value`,
    },
  })

Methods

  start()
  pause()
  resume()
  isPaused()

Browser support

The utility depends on URL Web API. If you need this to be supported on IE then url-polyfill will help you out in most of the cases.