Simply put, we only need to push our tagging specifications to Lucky Orange to an javascript array ( _loq), which is created through the Lucky Orange Initializing tag. The raw/js documentation for this functionality can be found in their “docs” section. The tags can later be used in LO’s dashboard to filter out heatmaps and recording sessions. LO will be initialized and will be ready to record heatmaps and session recordings after triggering this tag.Īnother functionality of Lucky Orange is to tag users during their sessions on your website. If you’re only using the most basic variant of Lucky Orange, this will be the only tag you’ll need. If all sections are filled in correctly, the final product will look something like this. Save the tag and your first LO tag is finished! 1.3 The finished tag The only thing left before saving the tag, is giving it a suitable name, description and thumbnail image. In the injects scripts section, you need to paste the CDN link you’ll also provide in the input field of the tag. In the global variables section, you’ll need to give the tag permission to set the global _lo_site_id variable. When pasting the script in the code section, a permissions section for “Accesses Global Variables” and “Injects Scripts” will become visible. To finish of the configuration of this tag, we need to set the permissions. If you named your fields differently, you’ll have to change the names of the keys in the script likewise. The values given in the input fields can be found as javascript keys of the data object in the script. injectScript() for loading the input CDN link and setInWindow() to set the LO site id as a global variable. InjectScript(data.CDNLink, data.gtmOnSuccess, data.gtmOnFailure, 'LuckyOrangeInit') Īs shown in the script above, this custom template will require two GTM Sandbox JS functions. SetInWindow("_lo_site_id", data.LuckyOrangeSiteID) Define the LO site id as global variable in the window object log('data =', data) //uncomment if logging is needed Var injectScript = require('injectScript') Var setInWindow = require('setInWindow') So let’s take a look at the custom template code: //const log = require('logToConsole') //uncomment if logging is needed Name them clearly, you’ll need the names later as references in your custom template code. Therefore we need two basic custom template fields to fill in these dynamic / client-specific values. The LO site id (1) and maybe the CDN link (2) (since I’m not sure if its dynamic or not). This tag requirs two dynamic input fields. Since I’m not really sure if the CDN link is static for all users, I’ll assume it isn’t. Only the first line (with the LO site id) and CDN link will probably look different. You can find yours in your Lucky Orange login environment. Var s = document.getElementsByTagName('script') Wa.type = 'text/javascript' wa.async = true Var wa = document.createElement('script') The original javascript tracking snippet will look something like this: window._lo_site_id = 99999 This tag instructs GTM to which LO property the data needs to be send. To simply initialize Lucky Orange we only need to load the default Lucky Orange snippet and create a single input field that captures the client id. You can find the finished products on my Github account in the GTM custom template repository. Passing custom (dataLayer) contextual user data to Lucky Orange.Tagging visitors/users with labels based on triggers.I created 3 tags which capture all the basic Lucky Orange functionalities: As of this moment (26-05-2019), there is not yet a custom template developed for Lucky Orange, nor is there a vendor tag available. Lucky Orange is a heatmapping and session recording tool with similar possibilities to tools like the popular Hotjar.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |