Reply
Highlighted
Occasional Contributor
Posts: 113
Registered: ‎12-11-2015

How to import Tag Templates from Github

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....