CODEWITHSUNDEEP
google-apps-scriptgoogle-sheetsadd-onfullstory
Shiv Yadav
Shiv Yadav

Reputation: 311

How to implement fullStory with Google Sheet Apps Script Add-on

I am new to Google Apps Script Add-on. I want to implement fullStory for data capture and user experience. I had developed the fullstory in the excel add-in successfully, but when I tried to create the same for the google app script add-on it was not working. I have added the script tag in google sheet add-on but it's not working as per it's document.

I have followed the below step:

https://help.fullstory.com/hc/en-us/articles/360020828273-Getting-Started-with-FullStory

I have added the below script in head section of add-on HTML file.

<script>
window['_fs_host'] = 'fullstory.com';
window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
window['_fs_org'] = 'id';
window['_fs_namespace'] = 'FS';
(function(m,n,e,t,l,o,g,y){
    if (e in m) {if(m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');} return;}
    g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};g.q=[];
    o=n.createElement(t);o.async=1;o.crossOrigin='anonymous';o.src='https://'+_fs_script;
    y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
    g.identify=function(i,v,s){g(l,{uid:i},s);if(v)g(l,v,s)};g.setUserVars=function(v,s){g(l,v,s)};g.event=function(i,v,s){g('event',{n:i,p:v},s)};
    g.anonymize=function(){g.identify(!!0)};
    g.shutdown=function(){g("rec",!1)};g.restart=function(){g("rec",!0)};
    g.log = function(a,b){g("log",[a,b])};
    g.consent=function(a){g("consent",!arguments.length||a)};
    g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)};
    g.clearUserCookie=function(){};
    g.setVars=function(n, p){g('setVars',[n,p]);};
    g._w={};y='XMLHttpRequest';g._w[y]=m[y];y='fetch';g._w[y]=m[y];
    if(m[y])m[y]=function(){return g._w[y].apply(this,arguments)};
    g._v="1.3.0";
})(window,document,window['_fs_namespace'],'script','user');
</script>

Code of Apps Script

Login.html

<head>
  <base target="_top">
  <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
  <?!= include('stylesheet'); ?>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
  <!-- Style CDN -->
  <link href="https://fonts.cdnfonts.com/css/graphik" rel="stylesheet" crossorigin="anonymous">
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
  <script>
    window['_fs_host'] = 'fullstory.com';
    window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
    window['_fs_org'] = 'id';
    window['_fs_namespace'] = 'FS';
    (function (m, n, e, t, l, o, g, y) {
      if (e in m) { if (m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].'); } return; }
      g = m[e] = function (a, b, s) { g.q ? g.q.push([a, b, s]) : g._api(a, b, s); }; g.q = [];
      o = n.createElement(t); o.async = 1; o.crossOrigin = 'anonymous'; o.src = 'https://' + _fs_script;
      y = n.getElementsByTagName(t)[0]; y.parentNode.insertBefore(o, y);
      g.identify = function (i, v, s) { g(l, { uid: i }, s); if (v) g(l, v, s) }; g.setUserVars = function (v, s) { g(l, v, s) }; g.event = function (i, v, s) { g('event', { n: i, p: v }, s) };
      g.anonymize = function () { g.identify(!!0) };
      g.shutdown = function () { g("rec", !1) }; g.restart = function () { g("rec", !0) };
      g.log = function (a, b) { g("log", [a, b]) };
      g.consent = function (a) { g("consent", !arguments.length || a) };
      g.identifyAccount = function (i, v) { o = 'account'; v = v || {}; v.acctId = i; g(o, v) };
      g.clearUserCookie = function () { };
      g.setVars = function (n, p) { g('setVars', [n, p]); };
      g._w = {}; y = 'XMLHttpRequest'; g._w[y] = m[y]; y = 'fetch'; g._w[y] = m[y];
      if (m[y]) m[y] = function () { return g._w[y].apply(this, arguments) };
      g._v = "1.3.0";
    })(window, document, window['_fs_namespace'], 'script', 'user');
  </script>
</head>

macro.gs

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Custom Menu')
    .addItem('Show sidebar', 'showSidebar')
    .addToUi();
}

function doGet() {
  return HtmlService.createHtmlOutputFromFile('home');
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
    .getContent();
}

function showSidebar() {
  var html = HtmlService.createTemplateFromFile('login').evaluate().setTitle("Add-on")
  SpreadsheetApp.getUi()
    .showSidebar(html);
}

I have provided the image of network pane for fullStory. network pane of fullStory

Image of privacy Section Privacy section Here is the link for fullStory document.

https://developer.fullstory.com/introduction

I don't know why it's not working.
Can anyone guide me on this?

Upvotes: 0

Views: 306

Answers (2)

Poojan3037
Poojan3037

Reputation: 207

Your client side of the sidebar is sent as a string to be injected into an iframe. One thing that you could try that others have found worked for them is adding this additional flag in script:

window['_fs_is_outer_script'] = true;

You can get more information on this flag in the iframe article :

Hope this will help you.

Upvotes: 1

Wicket
Wicket

Reputation: 38348

I'm not familiar with fullstory, but I see that your add-on is opening the client-side code in a sidebar. In this case the client-side of the sidebar is sent as as string to be injected into an iframe, so it will be constrained to the sidebar dimensions.

In other other words, if you are intending to use fullstory over the grid and other Google Sheets UI elements, it will not work.

Anyway, please be aware that the client-side code is satinized so the parts that don't pass the sanitization will not be included, so use the browser developer tools to validate that the whole client-side code is sent.

P.S. I suggest you to include <!DOCTYPE html> and <html>, </html>.

Related

Resources

Upvotes: 0

Related Questions