Advanced Integration - website generated data and events

Some complex tag container installations may require complex scenarios of tags interacting with the main website while being served by TDI container. This article lists the most common of those

Triggering the tag for specific web pages only

A good example is Wordpress blog where some pages have a specific attribute, like being a "page" page (in contrast to "post" pages). Imagine we need to trigger the tag for those pages only.

Originally the code would look like the following:

<?php if (is_page()) { ?>
<!-- the tag code below -->
<img src="http://tag.example.com/tag.gif">
<?php } ?>


This way we check if the page is "page" server-side and if so, render the tag. Naturally, TDI container knows nothing about what happens at the server side, so the server-side information should be provided client-side, and a corresponding variable/rule attached to the tag. Let's do it step by step:

  1. We create a tag of that <img> attribute, e.g.:

    <!-- the tag code below -->
    <img src="http://tag.example.com/tag.gif">


  2. We create a rule attached to that tag to contain a single condition like:

    MyPageTypeVariable equals to page

  3. We need to create a custom variable named "MyPageTypeVariable", and here it comes to several options when talking about the type of that variable:
    1. Variable. E.g. the global javascript variable. The code at the webpage should be replaced with

      <?php if (is_page()) { ?>
      <script>myPageTypeVariable = "page"</script>
      <?php } ?>


      , and the "Variable name" should naturally be set to "myPageTypeVariable". One should ensure the above code is inserted into the webpage above the container. The disadvantage is the global javascript namespace pollution, so it comes to the next option:
    2. DataVariable. Works the same, expect that the variable is set in private TDI container namespace, __mtm_data. The code would look like:

      <?php if (is_page()) { ?>
      <script>__mtm_data = __mtm_data || []; __mtm_data.push({ myPageTypeVariable : "page" })</script>
      <?php } ?>


      , "Variable name" stays the same, "Default value" could be omitted in our case, and the same rule about the code being placed before the container code is applied as well.
    3. DOMText / DOMAttribute. As the name states, the variable is about providing some data via DOM. E.g. in case of DOMText the code could be

      <?php if (is_page()) { ?>
      <div id="myPageTypeVariable" style="display:none">page</div>
      <?php } ?>


      , and for DOMAttribute it should look like

      <?php if (is_page()) { ?>
      <div id="myPageTypeVariable" data-type="page" />
      <?php } ?>


      (the "DOM element ID" would be "myPageTypeVariable" in both cases, "Attribute name" would be "data-type" for the latter case). The side effect of using these two variable types is that the tag exection is postponed till DOM is loaded to be sure those DOM elements are available

A more advanced scenario would require using a "Javascript code" variable type. It evaluates some custom javascript code and uses the last statement evaluated as the value. An extra flag labeled "this variable requires DOM to be loaded" should be set if the code evaluation should be postponed till DOM is loaded (e.g. if the code refers to some web page elements that may not be loaded in case the container code is placed in <head> section).

Triggering the tag upon some event at the main website

The tag execution may depend on the presence of some data at the website or some library being loaded. In case of synchronous website this doesn't matter much till the TDI container code is put after all the required initialization is done, but that matters much in case on asyncronous libraries loading, which becomes more and more common in nowadays websites. Another scenario is about activating the tag upon some action from the user side, like hovering some area of the website. TDI container provides an events mechanism for this purpose, that serves for both internal events and user-triggered events. The only internal event is called "mtm.dom" and it's triggered upon native DOMContentLoaded (e.g. when DOM is loaded). Let's imagine we're loading JQuery limrary asynchronously (say, by head.js), and the tag should depend on JQuery readiness:

  1. The original code whould look like:

    <script>
    head.js("query.js", function () {
        runSomeTagCode();
    });
    </script>
  2. So we create a "Javascript code" type tag with the code of

    runSomeTagCode();
  3. We create a rule for that tag, and the only condition in that rule comparing "Event" with "jqueryLoaded" (or any other custom string one selects for the event name; "mtm.dom" is the only reserved value - comparing with it would trigger the tag upon DOM is loaded)
  4. We modify the code as the following:

    <script>
    head.js("query.js", function () {
        __mtm_data = __mtm_data || []; // Again, just in case we run before the TDI container code is activated
        __mtm_data.push({ event : "jqueryLoaded");
    });
    </script>

Note one rule may contain several event conditions. The tag execution would be postponed until (and only if) all events are triggered.

Running synchronous code via TDI container API

TDI container manages to execute the "synchrnous" tag code (e.g. the one containing "document.write()" and other similar calls that are supposed to be run only at the document loading stage in the specific places of HTML code) in asyncronous fasion (e.g. after the page is loaded). The javascript code of the website that utilizes TDI container may benefit from the same functionality via the public API exposed by __mtm_data object:

<script>
__mtm_data = __mtm_data || []; // In case the code is called before the container is initialized
__mtm_data.push({ exec : "<div>some HTML sync code<" + "/div>" });
__mtm_data.push({ exec : { code : "<img src='http://www.example.com/img.gif'>", loc : "domElementID" });
__mtm_data.push({ exec : { code : "<img src='http://www.example.com/img.gif'><script>document.write('foo')<" + "/script>", loc : document.getElementsByTagName("div")[0] });
__mtm_data.push({ exec : { code : "<img src='http://www.example.com/img.gif'><script>document.open();document.write('foo');document.close()<" + "/script>", loc : document.getElementsByTagName("h1")[1] || document.body, callback : function () {
  // This callback is executed when the code was inserted
} });
</script>
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.