amc.on Tag Event Callbacks

To avoid errors due to asynchronous tag loading and rare cases of CDN unavailability, you should use the tag event callbacks provided by amc.on to wrap any code that depends on tags delivered by tag management.

Avoiding Availability Errors

An amc object is defined in the tag management page code:

var amc=amc||{};if(!amc.on){amc.on=amc.call=function(){}};

Since this object is defined on the page, any code that is contained in amc.on event callbacks fails silently if the tag container does not load for any reason.

Callback Events

Instead of relying on browser execution order, tag management provides an interface that lets you execute code based on tag events. This lets you deliver tags asynchronously to optimize performance, and still execute additional code after a tag loads or when other events occur.

Callbacks can be associated with the following events using amc.on:

Event name Description
tagload Triggered when a tag has been loaded and is ready to use.
tagappend Triggered when a tag is appended in the page by tag management.
tagignore Triggered when by some unknown reason one tag could not be append in the page.
pageload Triggered when the onload event is triggered by the browser.
domcontentloaded Triggered when the DOMContentLoaded event from the browser is triggered.
load Triggered when all the tags have been loaded.

tagload.tagid

tagappend.tagid

tagignore.tagid

For the events starting with tag (tagload, tagappend, tagignore) hierarchical event names are supported. This means that the id of the tag can be added after the event name.

Don't confuse these events with the DomContentLoaded or the onload events from browser. These events can be triggered before or after the events triggered by the browser.

Callback methods have the following syntax:

amc.on('eventname', function (event, data) {
});

Each callback method receives the following arguments:

  • event - the event name for which this callback will be processed.
  • data - an object having the following structure:
{
  id: 'tagid',
  tag: TagInstance
}
Note: Any code using the amc.on method should be added in the page after the page code. Code that depends on tags that are delivered by tag management should not be placed in the <head> element.

Examples

The following examples are based on a tag container that has 2 components:

  • Analytics - with the id 'analytics'
  • Target - with the id 'testandtarget'

Load

amc.on('load', function (event, data) {
	// Here we can add code that will be triggered once all the tags have been loaded by tag management.
 // For  set eVars, props, events, and then call s.t(). You can also do this directly
 // in tagmanager UI if you don't need page elements
});

Tag Load

amc.on('tagload', function (event, data) {
//called twice. Once for Analytics, and once for Target
});

You can find out the component for which the event was triggered by looking at the data object. This callback is for advanced users who need complex functionality. For example, you might have 10 tags to add in the page, but want to define an action when only 3 of them are loaded, independent of the other 7.

Specific Tag Loaded

amc.on('tagload.analytics', function (matchedmessage, data) {
 });

This callback is triggered when the tag with the ID of analytics has been loaded by the browser. This is the same as placing the code in the On Load section of the Analytics tag in the tag management UI (assuming your Analytics tag has an id of 'analytics').

For example, if you need to place code that is dependent on Analytics in the Target tag, you can add code similar to the following in the On Load section of the Target tag:

var mboxServerHost='omniture.tt.omtrdc.net;'
(function mboxOnLoad() {

    //place code here that will run after Target is loaded

})();

amc.on('tagload.analytics', function () {
  //place code here that will run after Analytics and Target are loaded
});

Nested DOM Content Loaded within the Analytics Tag

If you need to call s.t on the page instead of within the On Load section in the Analytics tag, the call should be contained within two callbacks. The first when the Analytics tag is loaded, and the second when the DOM is loaded:

amc.on('tagload.analytics', function (matchedmessage, data) {
	amc.on('domcontentloaded', function () {
		if (s) {
			s.pageName = document.getElementById('pagetitle').innerHTML;
			s.t();
		}
	});
});

This method is used if you need to interact with the DOM before making the tracking call.