Example implementation of Snapchat / Snap Pixel

[UnknownJ]

As per the instructions here, the following is an implementation of the Snap Pixel. The steps are as follows:

1. Create a Tealium Custom Container tag
2. Map your pixel ID (e.g. e0bfc1fc-8a06-48a8-b221-673653f0020e) to a variable "pixel_id"
3. Map the customer's e-mail address or phone number to the variable "user_email" or "user_phone_number"
4. Add suitable load rules
5. Go to the "Account Admin" menu, "Manage Templates", and overwrite the template for the new Tealium Custom Container tag with the following:

//tealium universal tag - utag.sender.custom_container ut4.0.##UTVERSION##, Copyright ##UTYEAR## Tealium.com Inc. All Rights Reserved.
//modified by @unknownj to support Snap Pixel

try {
  (function (id, loader) {

    // ################################################
    // Abort tag loading if no utag object exists
    if (utag === undefined) return;
    // ################################################
    

    // ################################################
    // Create the tag object, with loader function,
    // qualifying event types, initialisation status,
    // event counter (and limit), and a local debug
    // function that embeds the tag ID in the log
    // entries for ease of debugging
    var u = {
      loader: utag.ut.loader,
      ev: {
        all  : 0, // CONFIG: Set to fire on all event types
        view : 1, // CONFIG: Set to fire on utag.view events
        link : 0  // CONFIG: Set to fire on utag.link events
      },
      initialized: false,
      event_count: 0,
      event_limit: 20, // CONFIG: Set to limit the number of events per page
      DB: function(log){
        if(typeof log == "string"){
          utag.DB("Tag##UTID##: " + log);
        } else {
          utag.DB(log);
        }
      }
    };
    // ################################################


    // ################################################
    // Load tag object into parent utag profile
    u.DB("Loading tag");
    utag.o[loader].sender[id] = u;
    // ################################################


    // ################################################
    // Inject the code that creates the mapping object
    // and array of extension functions as defined in
    // the TIQ UI
    ##UTGEN##
    // u.map = { ... };
    // u.extend = [ ... ];
    // ################################################


    // ################################################
    // Define a function to run the first time the tag
    // fires.
    u.initialize = function(){

      u.DB("Initialising tag");


      // ################################################
      // Snapchat Specific: Create the Snapchat event
      // handler.
      if(window.snaptr) return;
      var tr = window.snaptr = function(){
        if(tr.handleRequest){
          tr.handleRequest.apply(tr, arguments);
          u.DB("Event triggered");
        } else if(tr.queue) {
          tr.queue.push(arguments);
          u.DB("Event queued");
        }
      };
      tr.queue = [];
      // ################################################


      // ################################################
      // Snapchat Specific: Load the externally hosted
      // JS file that powers the tag
      utag.ut.loader({
        src: "https://sc-static.net/scevent.min.js",
        type: "script",
        cb: function(){
          u.DB("Remote script loaded");
        }
      });
      // ################################################


      // ################################################
      // Snapchat Specific: Create the initial payload
      // object that will be passed to the init event
      // and establish the customer's identity
      //
      // We need a data item mapped to pixel_id
      // and at least one out of user_email,
      // user_phone_number, user_hashed_email and
      // user_hashed_phone_number
      var init_payload = {
        user_email: undefined,
        user_phone_number: undefined,
        user_hashed_email: undefined,
        user_hashed_phone_number: undefined
      };
      for(var k in init_payload){
        if(u.data[k]){
          init_payload[k] = u.data[k];
        } else {
          delete u.data[k];
        }
      }
      u.DB("Firing init event");
      tr('init', u.data["pixel_id"], init_payload);
      // ################################################

    };

    u.send = function(a, b) {
    
      if (!!u.ev[a] || !!u.ev.all) {

        u.DB("Sending tag");


        // ################################################
        // Abort send if we've reached the limit for
        // on-page events
        if (u.event_count >= u.event_limit){
          u.DB("Exceeded event limit of " + u.event_limit);
          return;
        }
        // ################################################


        // ################################################
        // Iterate over tag-scoped extensions and run them
        ##UTEXTEND##
        // for(c=0;c<u.extend.length;c++){
        //   try ...
        // ################################################


        // ################################################
        // Use the mapping object to translate elements in
        // the event payload to their local tag-specific
        // parameters and store them in u.data
        u.data = u.data || {};
        for (var d in utag.loader.GV(u.map)) {
          if (b[d] !== undefined && b[d] !== "") {
            var e = u.map[d].split(",");
            for (var f = 0; f < e.length; f++) {
              u.data[e[f]] = b[d];
            }
          }
        }
        // ################################################


        // ################################################
        // If the tag has not yet been initialised, run its
        // initialisation function
        if(!u.initialized){
          u.DB("Tag requires initialisation");
          u.initialize();
          u.initialized = true;
        }
        // ################################################


        // ################################################
        // Snapchat Specific: Fire pageview
        u.DB("Firing page view event");
        window.snaptr('track', 'PAGE_VIEW');
        // ################################################


        // ################################################
        // Increment internal event counter
        u.event_count += 1;
        // ################################################

      }
    };
    utag.o[loader].loader.LOAD(id);
  })("##UTID##", "##UTLOADERID##");
} catch (error) {
  utag.DB(error);
}
//end tealium universal tag

Standard caveats apply, including the fact that I've not got an advertiser account so I've not been able to test it end to end, just fancied reminding myself how tag templates work really..

[kathleen_jo]

Hi @UnknownJ. Brilliant job! Keep the amazing use cases coming!