Google analytics tracking js code not working in React - reactjs

I have a react website and in my html template I put the google analytics tracking code snippet.
The tracking works on my local (so I can actually see my dev session in GA console) but it doesn't work after I deploy to cloud. Here how my template looks like and react just render the root div.
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div id="root" />
</body>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="GA link..."></script>
<script>
GA tracking code...
</script>
</html>
My site is here. You can see from the source code the tracking code is there. However current session just doesn't show up in GA.

When I go to your site I see calls going out to Google Tag Manager and Google Analytics and Doubleclick.
Maybe you have a script blocker (uBlock Origin, Noscript, ...) disabled on localhost but active on the production site?

I resolved it eventually. Regenerate another project in GA and use the new project worked for me. Maybe it was something mess up with my old project setup.

Related

If I deploy my react app, will the link to a localhost still be valid, or will I also need to host the localhost app?

Basically the heading. I have a strapi app at localhost:1337 which I will fetch in React. I'm not very sure how localhost works, and therefore I want to know if the path will still be relevant when I deploy the react app.
When you deploy your react.js app on any server your url named http://localhost:1337/Dashboard
will be changed. In it http://localhost:1337/ is the base url or domain name. Which will change the server to the new one.
your code will maintain same value for that API and you will have to re-build your code each time you change your API, (most of people use low cost hosting provider which allow only port 80 to be used) my advice is to move your endpoit (backend url) outside your code in a json, .env file ... but what will work on most of platform is a variable defined in your public/index.html (not a best pratice but it will work) ex:
<html>
<head>
<!-- you will add this tag here it will contain your backend url -->
<script>
var bakendUrl = "http://....";
</script>
<!-- some other code here -->
</head>
<body>
<div id="root"></div>
</body>
</html>

How to use AngularJS using CDN?

Say that an app needs to be created using AngularJS with Cordova in Visual Studio, do I require anything else besides the Google CDN to use AngularJS?
<!doctype html>
<html ng-app>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>
</body>
</html>
I notice that npm is usually used to install AngularJS, though if just a simple app needs to be created, could this be sufficient.
Code from: https://docs.angularjs.org/misc/downloading
That's all you need. I find installing angular locally is great for development, since I use developer tools to disable caching and I don't want to ping the CDN everytime I update a view, but for quick projects the CDN is fine.

Setting up Flask with react-starter-kit

This questions is pretty specific to the react-starter-kit, though, someone else may be able to help here on the internets. I am trying to use the react-starter-kit with a flask application I am developing. I chose this yeoman generator as it had a lot of things I am looking for, though, I don't want to run on a node server. I have a flask app that I would just like to wire up to the react front end. I can't quite figure out how the node routes know which .js bundled file to include (and Node routes are a bit confounding to me anyways). Where would be the best place to start here?
I think if I could start with a specific question, to what .js file could I have an index.html point to? Or how can I find that?
I am tentative to ask this question here, but I hopefully will be directed to the right place.
Here is my index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Flask React</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- styles -->
</head>
<body>
<div id="app"></div>
<!-- scripts -->
<script type="text/js" src="build/assets.js"></script>
</body>
</html>
Here is my flask view:
#CORE.route('/', methods=['GET'])
def index():
return render_template('index.html')
Here is the build/assets.js
module.exports = {"main":{"js":"/main.js?032d72b634c91d2f8756"}};
Where the /main.js?{{string}} points the that bundled version of the app.
Here is the file directory layout:
App
|-app
|-Core
|-view.py
|-Templates
|-index.html
|-build
|-assets.js
|-src
What I have decided to do, and what I would recommend doing, is to use Graphene and Flask-GraphQL alongside the react-starter-kit. Then to get to my data I can just have the node server query to the flask server to get the data from postgres. This will allow me to still to data-y things in python with the flask server and produce a RESTful API if needed, but will allow me to benefit from the awesomeness of GraphQL.
I am still getting everything figured out, and I will come back to repost in the future when I get things working all the way.

Can i deploy my grails app to app-engine using intellj app-engine plugin

I read so many forums that it's not possible to deploy grails application to google app engine because of grails app-engine plugin hasn't been updated for years.And while I was about to give up i found that its possible to deploy project's using intellij app engine plugin so i simply created a new grails app and deploy it using intellij and there it was.http://mine-1150.appspot.com/ but the problem is that its only able to acess index.jsp which is located inside the WEB-INF directory which contains appengine-web.xml ,web.xml and index.jsp only and not my controllers.so since i get passed the hard work can any body tell me how i should be able to access my controllers and that's job well done.FYI this is the index.jsp
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
</head>
<body>
<h1>hello there</h1>
</body>
</html>
app engine has its own way of deploying application to its platform and in ur case it treats ur project as if it was of pure java.so it will create its own directory and jsp files.so u can deploy it but it wouldnt be running in the way u intended it to run

JQuery mobile: test offline

I am new in JQuery Mobile. I really like it but I have 2 basic questions:
1- Can I test the app OFFLINE in my iPhone?
I know how to see the app when I am with an Internet connection even how to create the icon. But I don't see how to see the app i I don't have an Internet connection.
2- I suppose I can sent the html and css made with jQuery Mobile to Apple as any app. And it will work offline. Is that right?
Is there anyone with experience who have done apps with JQuery Mobile and are working in the app store?
Yes, you can have a jQuery Mobile page completely offline. Download the necessary libraries to your device. For the example I used the following
jquery-1.8.0.min.js
jquery.mobile-1.2.0.min.js
Additionally you need the jQuery Mobile CSS structure file
jquery.mobile.structure-1.2.0.min.css
Then use the theme roller to create your own CSS (or without changes just use the default jQuery CSS) and download it including the icon sets to your device. For the example I used this CSS name
taifun.min.css
The icon sets are stored in the subdirectory /images.
example code
<!DOCTYPE html>
<html>
<head>
<title>Offline</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="taifun.min.css" />
<link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="content">
<h1>I'm a jQuery Mobile offline page</h1>
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
</ul>
</div><!--/content -->
</body>
</html>
screenshot HTC Desire
#Brice Favre is right - testing 'offline' could be achieved by hosting your app on a LAN and accessing it using your iPhone through Wifi.
If you 'host' the app using e.g. PhoneGap, and include all the libaries (jQuery, jQuery Mobile) and CSS as part of your application, then your app will function just fine without an Internet connection - many apps work this way. See this PhoneGap tutorial.

Resources