Google Sheets Add-on not triggering custom events in GTM - google-apps-script

I am trying to fire GTM custom events from Google App Script Sidebar. A simplified version of the code is given below. The same code works if I test it locally on a local server as a web page. Events are triggered. But when it is part of an add-on the events are not getting triggered. Any help would be greatly appreciated. The HTML file is give below. This is displayed as a sidebar.
Update: I have put the full working code. The same below code is firing the tags when I test is in local server. But is does not fire the tags when displayed as a sidebar in a google sheets add-on. I am suspecting that the html is displayed inside an iframe. Not sure why it is not working
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<script>
dataLayer = [];
</script>
<!-- Google Tag Manager -->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" ></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TLGFLD7"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="container main_page">
<div class="row">
<div class="col-md-12">
<div class="text-center">
<button type="button" class="btn btn-primary" name="report" id="report" >Create Report</button>
</div>
</div>
</div>
</div>
<script>
function ProcessReport() {
dataLayer.push({'event':'run_report'});
console.log(window.dataLayer);
}
$( document ).ready(function() {
$("#report").click(ProcessReport);
});
</script>
</body>
</html>

Try
function ProcessReport() {
dataLayer.push({'event':'run_report'});
console.log(window.dataLayer);
}
$( document ).ready(function() {
$("#report").click(ProcessReport());
});

Related

Bootstrap CSS is not loading on example page

I am experimenting with bootstrap css but it just isn't loading on my browser, I've even published the page on my server, It doesn't even render the css styles. Now other example pages load fine on my browser. Just the ones I download locally are giving me an error.
Here's what I've tried out so far:
Validated the HTML to see if I'm making some sort of syntax error but thats not the case. It came clean as a whistle.
Downloaded the bootstrap.css and locally referenced it in the html just in case it was something with my server fetching the file but that didn't worked either.
Lastly, I thought that this might had something to do with my text editor's text encoding or perhaps the end-of-line character incompatibility so I went to codeply.com and executed the damn thing in their online editor and good lord, it didn't worked there.
To clarify further, this is how the page is supposed to look like
against how It does look like
I can see that the css styles are partially applied as the page is not showing default html fonts and styles. I even tried changing permissions of the index.html file to 777 in case that was causing trouble but all in vain so far.
Here's a link to my raw html in codeply.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class='site-wrapper'>
<div class='site-wrapper-inner'>
<div class='cover-container'>
<div class='masthead clearfix'>
<div class='inner'>
<h3 class='masthead-brand'> NileSoft </h3>
<nav>
<ul class='nav masthead-nav'>
<li>Our Clients</li>
<li>Our Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
Learn more
</p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.main.js"></script>
</body>
</html>
Might try writing the script tag such as this:
<script src="./js/bootstrap.main.js"></script>
Also, the same for the link tags which includes your bootstrap file locally:
<link rel="stylesheet" href="./css/bootstrap.min.css">
Also, the preferred order for CSS and JS files are as follows:
<html>
<head>
<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="./css/bootstrap.css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
...
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- Bootstrap JS File -->
<script src="./js/bootstrap.min.js"></script>
<!-- Custom JS File -->
<script src="./js/custom.js"></script>
</body>
</html>
Script imported at the bottom has a http, it might have got blocked by your browser. Also writing <script src="js/bootstrap.main.js"></script> might not work in codeply. Also, try importing other js files after standard libraries like jquery.
To get Bootstrap into your page, simply paste the code below into the <head> section of your template.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Google Sign In Button Won't Render

I'm trying to make a sign in page for my web application and I followed the steps on this website:https://developers.google.com/identity/sign-in/web/sign-in
but the google sign in button won't show up, it's just a blank screen but I see that the google icon shows up and fades so it is connecting to google.
this is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Google SignIn</title>
<!-- Bootstrap CDN: Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Google Sign In Client ID -->
<meta name="google-signin-client_id" content="**MY GOOGLE CLIENT ID**">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
<style>
.g-signin2{
margin-left:500px;
margin-top:200px;
}
.data{
display:none;
}
</style>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<div class="data">
<p>Profile Details</p>
<img id="pic" class="img-circle" width="100" height="100"/>
<p>Email Address</p>
<p id="email" class="alert alert-danger"></p>
<button onclick="signOut()" class="btn btn-danger">SignOut</button>
</div>
</body>
</html>
The Google Sign in API works only on a running web server. You will not be able to see the Sign in button if you are directly opening the file.

MVC project views/layout broken

I have this project where I applied a theme (getelella in exact) where when I left it looks good and fine (save the project and shutdown pc), but when I open my project again the layout is messed up. I created a new project and it happened again. Can you help me guys what could be the problem here please?
Update, additional info:
At every time I freshly open my project, I run it to check my current progress but it doesn't start to build and it stays there for 20 mins before it runs the project.
As requested in the comment:
<!-- Bootstrap -->
<link href="~/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Font Awesome -->
<link href="~/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<!-- NProgress -->
<link href="~/vendors/nprogress/nprogress.css" rel="stylesheet" />
<!-- iCheck -->
<link href="~/vendors/iCheck/skins/flat/green.css" rel="stylesheet" />
<!-- bootstrap-progressbar -->
<link href="~/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" />
<!-- JQVMap -->
<link href="~/vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet" />
<!-- bootstrap-daterangepicker -->
<link href="~/vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" />
<!-- Custom Theme Style -->
<link href="~/build/css/custom.min.css" rel="stylesheet" />
<!-- jQuery -->
<script src="~/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="~/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="~/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="~/vendors/nprogress/nprogress.js"></script>
<!-- Chart.js -->
<script src="~/vendors/Chart.js/dist/Chart.min.js"></script>
<!-- gauge.js -->
<script src="~/vendors/gauge.js/dist/gauge.min.js"></script>
<!-- bootstrap-progressbar -->
<script src="~/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="~/vendors/iCheck/icheck.min.js"></script>
<!-- Skycons -->
<script src="~/vendors/skycons/skycons.js"></script>
<!-- Flot -->
<script src="~/vendors/Flot/jquery.flot.js"></script>
<script src="~/vendors/Flot/jquery.flot.pie.js"></script>
<script src="~/vendors/Flot/jquery.flot.time.js"></script>
<script src="~/vendors/Flot/jquery.flot.stack.js"></script>
<script src="~/vendors/Flot/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="~/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="~/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="~/vendors/flot.curvedlines/curvedLines.js"></script>
<!-- DateJS -->
<script src="~/vendors/DateJS/build/date.js"></script>
<!-- JQVMap -->
<script src="~/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="~/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="~/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="~/vendors/moment/min/moment.min.js"></script>
<script src="~/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Custom Theme Scripts -->
<script src="~/build/js/custom.min.js"></script>
I had a similar problem with some static html pages, and I have found out that there were a couple of JavaScript libraries placed in the wrong place. So I sought for the paths in your script. I see that all of them begin with a tilde:
<script src="~/vendors/bootstrap-daterangepicker/...
<script src="~/build/js/...
I have changed the paths in one of my pages and replaced two dots with a tilde and... bingo! the layout was lost. Then I have changed them back to two dots, like this:
<script src="../vendors/bootstrap-daterangepicker/...
<script src="../build/js/...
and... voilá! the layout was back again.
I suggest you check carefully your paths and change the beginning tilde to dots or whatever be needed and see if you can get your project to work.

Less has finished and no sheets were loaded

I'm developing a website using LESS and I can't seem to get it working. I just keep getting the following message:
Less has finished and no sheets were loaded.
I'm running on a http-server web server to see the effect of the less and my Chrome Console has no errors or 404's etc. The code I have in place is super basic as I'm just testing for the time being. Only thing I can think it might be is a script ordering issue or maybe a conflict?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>TrakMan | Re-Brand | Version 1</title>
<!-- LESS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<!-- Styles and Fonts -->
<!-- Font Import -->
<link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Trakman Styles -->
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
</head>
<body>
<!-- JS SCripts -->
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap JS CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Font Awesome CDN-->
<script src="https://use.fontawesome.com/c704ae342d.js"></script>
</body>
</html>
variables.less:
// Colours
#primary: #F86301;
#primary-light: #FF8C3A;
#primary-lighter: #FFA564;
#primary-dark: #C75200;
#primary-darker: #9C4100;
#dark: #222;
#light: #E7E7E7;
// Fonts
#family: 'Maven Pro', sans-serif;
#size: 14px;
styles.less:
#import "variables.less";
html {
font-family: #family;
font-size: #size;
}
body {
background: #dark;
}

Create modal view on jquery mobile using html

I am creating a mobile website using HTML5 and jquery mobile. I am currently trying to create a modal view to show images in. I have tried using shadowbox and lightbox but in both cases the modal view opens but then the page transitions to a new blank page. Here is my code:
<head>
<script src="jquery.mobile-1.0/demos/jquery.js" type="text/javascript"></script>
<script src="CodeGeneral.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="CodeAppDetailScreen.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.css">
<link rel="stylesheet" href="StyleMaincss.css">
<!--Shadowbox-->
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
//Content
<div id="viewport">
<a id="ss1" onclick="return false" href="Screenshots/ss1.png" rel="shadowbox[ScreenShot]" ><img src="Screenshots/ss1.png"></a>
<a id="ss2" onclick="return false" href="Screenshots/ss2.png" rel="shadowbox[ScreenShot]" ><img src="Screenshots/ss2.png"></a>
<a id="ss3" onclick="return false" href="Screenshots/ss3.png" rel="shadowbox[ScreenShot]" ><img src="Screenshots/ss3.png"></a>
</div>
</body>
Does anyone know how to fix this?
I hope if you can give PhotoSwipe a try. It's a 3rd party plugin that can be easily integrated with jQuery Mobile.
I'm not sure if the following plugins works for you or not?!
jQuery Mobile Pagination Plugin
Diapo slideshow