Advanced Script Tag Management

Tag Management Tools

If your team utilizes a tag management tool (Tealium, Google Tag Manager, Tag Commander, SuperTag, etc.), you may use this to deploy the Cobrowse tag in the head section of the webpages. However, some tag managers (Google Tag Manager, Ensighten, etc.) may not allow you to add attributes to a javascript tag as in the previous examples.

To work around this, you can implement your tag into two separate sections: the meta attributes tag and the JavaScript loader tag. The meta attributes tag will include all the attributes needed (data-groupid, data-site, data-scriptserver) as well as all the optional attributes you might want to use (i.e., data-ui, data-inputelements, etc.). The JavaScript loader tag will provide the link to your group’s Cobrowse script with the appropriate version. The meta tag must come first. If not, you will see a “data-groupid missing” error in the console.

An example looks like this:

<!--Meta Attribute Tag:-->
<meta id='glance-cobrowse' data-groupid="00001" data-site="staging">

<!--JavaScript Loader Tag:-->
<script id="cobrowsescript" type="text/javascript" src="https://www.glancecdn.net/cobrowse/CobrowseJS.ashx?group=00001&site=staging" charset="UTF-8"></script>

The script tag must be included on the page itself, as well as within certain iframes.

If using a script tag only, the id must be glance-cobrowse. If using a meta tag and a script tag, the meta tag id should be glance-cobrowse and the script tag id should be cobrowsescript.

Use a Meta Tag for Attributes

In some environments, it is not possible to add arbitrary attributes to a script tag. Cobrowse parameters can alternatively be specified in a meta tag.

For example:

<meta
  id="glance-cobrowse"
  data-groupid='12345'
  data-site='staging'
  data-inputevents='{"ctrl-13":"startSession"}
></meta>

Manage Tags

The Glance Cobrowse script works with tag management systems such as Tealium and Ensighten and can be added to the page after the page load if desired. If adding the script tag dynamically, the following is the best cross-browser approach:

1. Create the script element and set all attributes except the src attribute.
2. Add the script tag to the document.
3. Set the script tag src attribute.

iframes

Iframes must also include a script tag, unless one of the following conditions apply:

• The iframe is dynamically built using JavaScript.
• The hostname and protocol of the iframe match the parent. For example, the parent is at https://www.mycompany.com, and the iframe is also at https://www.mycompany.com.

In the above listed cases, Glance is able to automatically include the iframe in the Cobrowse session.

If the parent is at www.mycompany.com and the iframe is at photos.mycompany.com, the iframe must have its own script tag. Also the iframe URL protocol, HTTP or HTTPS, must match the parent.

If your site contains iFrames of third-party content, you must add the third-party site to the Trusted Sites list.

Self-Hosting Scripts

Glance recommends referencing the Cobrowse script from the Glance CDN at glancecdn.net. When you use the Glance CDN:

• Glance can easily provide you with updates and enhancements to the Cobrowse product.

• Changes made using the button customization tool will be automatically applied without involving your website development team.

You can, however, host the scripts on your own server if you prefer. Glance will provide upgraded scripts approximately once per quarter, and will support the current version and at least one version prior.

Glance provides a tool to help generate a single customized self-hosting package, which includes:

• The standard JavaScript, HTML, and CSS that is currently included in the self-hosting package.
• Your group’s staging and production custom skin CSS file with your color and branding customizations.
• Your group’s staging and production custom visitor text JSON files with customized widget text.

To host the script on your company website instead of accessing it from our CDN, you will need to:

1. Download the package by going to the Cobrowse Settings section of Account Management. Scroll down to the Self-hosting Package section.
   1. Each version of Cobrowse has its own unique package link.
   2. If you don’t see a link for the version you are expecting, contact Glance support.
2. For Cobrowse versions 6.3.0+, download the corresponding video package from https://glancecdn.net/video/packages/GlanceVideo_X.X.X.zip (Replace the Xs with the same version number as the base package downloaded in Step 1).

3. Unzip the contents of the packages and place them on your server. Place the base package from Step 1 in a folder named Cobrowse and the video package from Step 2 (if using Cobrowse 6.3.0+) in a sibling folder named video.

   • The URL must contain the word “cobrowse” only once.
   • For example, if you plan to host your files at https://www.yourcompany.com/glance/ then you would create the following folders:
     • https://www.yourcompany.com/glance/cobrowse
     • https://www.yourcompany.com/glance/video

4. Reference the location of the GlanceCobrowseLoader_X.X.XM.js file in the src attribute of your script tag, as shown in the following example:

<script id="glance-cobrowse"
src="https://www.yourcompany.com/glance/cobrowse/js/GlanceCobrowseLoader_X.X.XM.js"
data-groupid="1"
data-site="staging"
charset="UTF-8">
</script>

If you are hosting the script on your own server, add the attribute data-scriptserver which tells Glance where to find the additional script and CSS resources that you host.

For example:

data-scriptserver='https://myscriptserver.net/scripts'

Upgrade a Self-hosted Script

Periodically, Glance releases updates to the Cobrowse JavaScript package. To upgrade your website to use the latest scripts, you will need to download a new package and put it on your website. The GlanceCobrowseLoader script in the new package is named with the new version number. You have a couple of options for dealing with upgrades:

To generate and download the self-hosting package:

1. Once a new release is available, update your website to point to the new version. In other words, in the script tag above, change the version number to match the version number you are upgrading to.

2. Use a configuration setting on your website to control the version number, for example: src=“https://www.yourcompany.com/glance/GlanceCobrowseLoader_<%=GlanceCobrowseVersion%>M.js”

3. Copy the GlanceCobrowseLoader_x.y.zM.js script to a generic name “GlanceCobrowseLoader.js” and reference that name in the script src attribute. You will need to make sure that your server applies appropriate cache headers so that visitors will be getting the latest version after you upgrade.