How to import Tag Templates from Github

Tealium Expert
Tealium Expert

Quick proof of concept demonstrating how you can use Github's Content API in conjunction with TIQ's saveTemplate API to replicate a Github hosted file into Tealium's tag templates.. Run it directly in the console, or as a Greasemonkey/Tampermonkey script, or a a bookmarklet, or indeed as a customer Tealium Tools plugin.

You run it from within TIQ, from any tab, and the code goes thus:

/**
 * Define an array of objects that define a pair of locations - the first, an account,
 * profile and tag identifier for a TIQ tag template. The second, a GitHub user, a public
 * repository, and a path to the file that contains the source for the template.
 */ 
var mappings = [
  {
    account: "realiumit", profile: "main", tag_id: "1",
    git_user: "realiumit", git_repo: "realium-tags", git_path: "tag1.js"
  },
  {
    account: "realiumit", profile: "main", tag_id: "7",
    git_user: "realiumit", git_repo: "realium-tags", git_path: "tag7.js"
  },
];

/**
 * Iterate over the list of resource mappings and process them in turn.
 */
for(var i = 0; i < mappings.length; i++){
  loadExternalResources(mappings[i]);
}

/**
 * Acquires source code from GitHub, and writes it to a Tealium IQ template
 * @param {object} mapping - an object that relates a GitHub file to a unique template
 */
function loadExternalResources(mapping){
  getGitCode(
    mapping.git_user,
    mapping.git_repo,
    mapping.git_path,
    function(content){
      setTemplate(
        mapping.account,
        mapping.profile,
        mapping.tag_id,
        content
      );
    }
  );
}

/**
 * Accesses the TIQ saveTemplate API and writes the source code presented in the content
 * argument to the relevant template ID within the given account and profile
 * @param {string} account - the TIQ account name
 * @param {string} profile - the TIQ profile name
 * @param {number} template_id - the ID of the tag within the interface
 * @param {string} content - the source code to load
 */
function setTemplate(account, profile, template_id, content) {
  var tiqapi = "https://my.tealiumiq.com/urest/legacy/saveTemplate?utk=" + utui.util.getUTK();
  var payload = {
    account: account,
    profile: profile,
    type: "profile",
    template: "profile." + template_id,
    code: content,
  };
  console.log("Setting template: " + [account,profile,"utag." + template_id + ".js"].join("/"));
  $.post(
    tiqapi,
    payload
  );
}

/**
 * Connects to the Github API and retrieves the source code for the specified file, passing
 * it to a callback function
 * @param {string} user - the Github user
 * @param {string} repo - the Github repository
 * @param {string} path - the path to the file within the repository
 * @param {function} callback - a function accepting a single argument to call upon completion
 * of the asynchronous GET request, passing the retrieved source code
 */
function getGitCode(user, repo, path, callback){
  var git = [
    "https://api.github.com/repos",
    user,
    repo,
    "contents",
    path
  ].join("/");
  console.log("Acquiring code from: " + git)
  $.get(
    git,
    function (a) {
      callback(atob(a.content));
    }
  );
}

There's no reason why other Git implementation couldn't be used, provided they exposed accessible APIs that allow you to grab the contents of files. Nor is there a reason why you'd have to save to templates, as opposed to writing to utui.data.customizations[extension_id].code to populate JS extensions. The sky's the limit, at least while the TIQ APIs still work....