Example: Per-Content Conversions

By default, firing a conversion means a developer hardcodes the call and redeploys. Every new goal, every renamed conversion, every "can we also track this one?" goes back into the development queue.

This example moves that decision to the people making it. A developer adds two fields to a Content Type and drops a script into the container once. From then on editors decide, per content instance, whether it counts as a conversion and what that conversion is called — no code changes, no redeploy.

The worked example is a CTA button inside a Hero, a reusable Content Type placed on many pages through a container. The same technique applies to any reusable Content Type.

Avoiding False Positives#

Everything here exists to fire conversion(name) at exactly the right moment and never at the wrong one. A false positive is worse than a missing conversion: it inflates your numbers.

Step 1: Add Two Fields#

Step 2: Detect and Fire#

#set($doConversion = false)
#if($UtilMethods.isSet($conversionName) && "$!{enableConversion}" == "true")
    #set($doConversion = true)
#end

<a class="primary-cta" href="$cta1Url"#if($doConversion) data-dot-conversion="$esc.html($!{conversionName})"#end>$cta1Text</a>

#if($doConversion)
<script>
  (function () {
    if (window.__dotConversionListenerAdded) return;
    window.__dotConversionListenerAdded = true;

    document.addEventListener('click', function (event) {
      var link = event.target.closest('a[data-dot-conversion]');
      if (!link) return;
      var name = link.getAttribute('data-dot-conversion');
      if (!name) return;
      if (!window.dotAnalytics) return;   // editor / analytics off
      window.dotAnalytics.conversion(name);
    });
  })();
</script>
#end

Adapting to Other Goals#