Tag Wizard: Custom Code

The Custom Code block gives you programmatic access to your Tag’s settings and the Invoca Toolkit, for use cases the Tag Wizard UI doesn’t cover.

The Tag Wizard handles most dynamic number replacement and attribution use cases without requiring JavaScript knowledge. For advanced use cases, the Custom Code block gives you access to all the data set in the Wizard UI, combined with the Invoca Toolkit, so you can set additional options for the InvocaJS code running on your site.

How it works

The Custom Code block provides a JavaScript variable called options, prepopulated with anything set via the UI. For example, options.cookieDays is set to 1 if your Attribution Window field is set to 1, and options.numberToReplace is set to an array of phone number/campaign ID pairs from your Website Phone Numbers section. You can add, remove, or merge settings on the options variable. The last line of the Custom Code block must return that object — typically by adding to options and returning it. The available options use the same interface as the InvocaJS library’s main function (Invoca.PNAPI.integration), limited to the specific options documented in Tag Wizard: Custom Code Settings.

Advanced use cases

Hiding number flicker

Due to asynchronous loading, dynamic number replacement can briefly flicker — hiding it can improve the visitor’s experience. If your page loads jQuery:

function showNumber(){
  $(".InvocaNumber").animate({'opacity': 1}, 250) // use your CSS selector from numberSelector, or a new class
}

options.onComplete = showNumber;

setTimeout(function(){
  showNumber();
}, 3000);

return options;

This requires the class’s default CSS to be opacity:0. Invoca reveals the element once InvocaJS has fully loaded and the specified delay has passed — timing may vary depending on when InvocaJS loads on the page. Without jQuery, you can get a similar result (without the fade) by targeting the DOM node directly:

function showNumber(){
  var elements = document.querySelectorAll(".InvocaNumber");
  elements.forEach(function(el) {
    el.style.opacity = 1;
  });
}

Requiring multiple URL parameters to run

requiredParams runs the Tag if any listed parameter is present — it doesn’t require all of them. To require multiple parameters together:

if (Invoca.Tools.readUrl("utm_medium") && Invoca.Tools.readUrl("utm_source")){
  options.autoRun = true;
} else {
  options.autoRun = false;
}

return options;

Getting Started

Implementation & The Invoca Tag

Tag Wizard: Custom Code

How it works

Advanced use cases

Hiding number flicker

Requiring multiple URL parameters to run

Where to go next

​How it works

​Advanced use cases

​Hiding number flicker

​Requiring multiple URL parameters to run

​Where to go next

How it works

Advanced use cases

Hiding number flicker

Requiring multiple URL parameters to run

Where to go next