Cludo Search Script via Custom Container

[mark_jaggers]

We are implementing a new onsite search and I am having one heck of a time getting it to work with the Custom Container . This is the script I need to push

<script type="text/javascript" src="//customer.cludo.com/scripts/bundles/search-script.js"></script>
<script type="text/javascript">
var CludoSearch;
$(document).ready( function() {
var cludoSettings = {
customerId: 296,
engineId: 1798,
searchUrl: "/en_us/common/cse.html",
searchInputs: ["cludo-search-form","cludo-search-content-form"],
initSearchBoxText: "",
language: "en",
endlessScroll: {stopAfterPage:3, resultsPerPage:10, bottomOffset: 145},
translateSearchTemplates: true,
loading: "<div class='loader'></div>"
};
CludoSearch= new Cludo(cludoSettings);
// translations
CludoSearch.translateProvider.translations["en"]["category_header"] = "Refine Search";
CludoSearch.translateProvider.translations["en"]["your_search_on"] = "Showing results for <span class='highlight'>{{value}}</span> ";
CludoSearch.translateProvider.translations["en"]["total_results"] = "<span class='total-results'>{{value}} results</span>";
CludoSearch.translateProvider.translations["en"]["total_result"] = "<span class='total-results'>{{value}} result</span>";
CludoSearch.translateProvider.translations["en"]["in_category"] = "";
CludoSearch.init();
});
</script>

My biggest problem has been trying to get the library js to load. We are able to call the search-script.js script hardcoded on the site and the rest of the code through Tealium but this causes problems. I am sure this is probably simple but can you explain to me how to call the library correctly with the custom container?

thanks

Mark

[kayleigh]

Hi @mark_jaggers,

I'm not sure if you've already tried what I'm about to suggest, but take a look :)

I think the trouble you might be running into is with the HTML tags. These instructions say that HTML and especially <script></script> tags shouldn't be included. If you're following those instrutions, on step 12, you may just need to take the extra steps of deleting the single-line JavaScript comments on the loader callback and function calls when you edit the template config. The loader callback function section starts on line 81 and ends on line 93; the loader function calls start on line 96 and end on line 108. There are multiple lines in each section that will need to be uncommented. Delete the // to uncomment each line within these sections. Then you can paste in the link to the library on line 89. 

Next you'll want to add in the rest of the code within the loader callback function (starts on line 84 and ends on line 91).

Give it a try, I hope that helps!

Kayleigh

[adrian_browning]

Hi @mark_jaggers

Here is an example of how I would create this as a Custom Container.

Spoiler

//~~tv:20010.20140827
//~~tc: Tealium Custom Container

//tealium universal tag - utag.sender.custom_container ut4.0.##UTVERSION##, Copyright ##UTYEAR## Tealium.com Inc. All Rights Reserved.
var CludoSearch;
try {
  (function (id, loader) {
    var u = {"id" : id};
    utag.o[loader].sender[id] = u;
    // Please do not modify
    if (utag.ut === undefined) { utag.ut = {}; }
    // Start Tealium loader 4.41
    var match = /ut\d\.(\d*)\..*/.exec(utag.cfg.v);
    if (utag.ut.loader === undefined || !match || parseInt(match[1]) < 41) { u.loader = function(o, a, b, c, l, m) { utag.DB(o); a = document; if (o.type == "iframe") { m = a.getElementById(o.id); if (m && m.tagName == "IFRAME") { b = m; } else { b = a.createElement("iframe"); } o.attrs = o.attrs || {}; utag.ut.merge(o.attrs, { "height": "1", "width": "1", "style": "display:none" }, 0); } else if (o.type == "img") { utag.DB("Attach img: " + o.src); b = new Image(); } else { b = a.createElement("script"); b.language = "javascript"; b.type = "text/javascript"; b.async = 1; b.charset = "utf-8"; } if (o.id) { b.id = o.id; } for (l in utag.loader.GV(o.attrs)) { b.setAttribute(l, o.attrs[l]); } b.setAttribute("src", o.src); if (typeof o.cb == "function") { if (b.addEventListener) { b.addEventListener("load", function() { o.cb(); }, false); } else { b.onreadystatechange = function() { if (this.readyState == "complete" || this.readyState == "loaded") { this.onreadystatechange = null; o.cb(); } }; } } if (o.type != "img" && !m) { l = o.loc || "head"; c = a.getElementsByTagName(l)[0]; if (c) { utag.DB("Attach to " + l + ": " + o.src); if (l == "script") { c.parentNode.insertBefore(b, c); } else { c.appendChild(b); } } } }; } else { u.loader = utag.ut.loader; }
    // End Tealium loader
    // Start Tealium typeOf 4.35
    if (utag.ut.typeOf === undefined) { u.typeOf = function(e) {return ({}).toString.call(e).match(/\s([a-zA-Z]+)/)[1].toLowerCase();};} else { u.typeOf = utag.ut.typeOf; }
    // End Tealium typeOf
    
    u.ev = {"view" : 1};
    u.initialized = false;
    u.scriptrequested = false;

    ##UTGEN##
    
    // Start Loader Callback
    u.loader_cb = function (a, b, c) {
      utag.DB("send:##UTID##:CALLBACK");
      u.initialized = true;
      
      var cludoSettings = {
        customerId: 296,
        engineId: 1798,
        searchUrl: "/en_us/common/cse.html",
        searchInputs: ["cludo-search-form","cludo-search-content-form"],
        initSearchBoxText: "",
        language: "en",
        endlessScroll: {stopAfterPage:3, resultsPerPage:10, bottomOffset: 145},
        translateSearchTemplates: true,
        loading: "<div class='loader'></div>"
      };
      CludoSearch= new Cludo(cludoSettings);
      // translations
      CludoSearch.translateProvider.translations["en"]["category_header"] = "Refine Search";
      CludoSearch.translateProvider.translations["en"]["your_search_on"] = "Showing results for <span class='highlight'>{{value}}</span> ";
      CludoSearch.translateProvider.translations["en"]["total_results"] = "<span class='total-results'>{{value}} results</span>";
      CludoSearch.translateProvider.translations["en"]["total_result"] = "<span class='total-results'>{{value}} result</span>";
      CludoSearch.translateProvider.translations["en"]["in_category"] = "";
      CludoSearch.init();
      
      
      utag.DB("send:##UTID##:CALLBACK:COMPLETE");
    };
    // End Loader Callback
    
    u.send = function (a, b) {
      if (u.ev[a] || u.ev.all !== undefined) {
        utag.DB("send:##UTID##");
        utag.DB(b);
        
        var c, d, e, f;
        
        u.data = {
          "base_url" : "//customer.cludo.com/scripts/bundles/search-script.js"
        };
        
        // Start tag-scoped extensions
      ##UTEXTEND##
        utag.DB("send:##UTID##:EXTENSIONS");
        utag.DB(b);
        // End tag-scoped extensions
        
        if (u.initialized) {
          u.loader_cb(a, b);
        } else {
          if (!u.scriptrequested) {
            u.scriptrequested = true;
            u.loader({
              "type" : "script",
              "src" : u.data.base_url,
              "cb" : u.loader_cb,
              "loc" : "script",
              "id" : "utag_##UTID##"
            });
          }
        }
        
        utag.DB("send:##UTID##:COMPLETE");
      }
    };
    utag.o[loader].loader.LOAD(id);
  }("##UTID##", "##UTLOADERID##"));
} catch (error) {
  utag.DB(error);
}
//end tealium universal tag

Adrian