I would like to get the real-time user number from Google Analytics Real-time Overview page. I have looked into react-ga but it doesn't seem to have what I am looking for.
I have followed the guide below, but my GET requests have not gone through in my app
https://developers.google.com/analytics/devguides/reporting/realtime/v3/reference
If someone could be so kind to give an example using React.
Below is the API call portion of my code. I have already implemented Google Sign In and is currently signed in.
window.gapi.client
.request({
path:
'https://www.googleapis.com/analytics/v3/data/realtime/ids=ga%3A(my_id)&metrics=rt%3AactiveUsers&dimensions=rt%3Amedium',
method: 'GET',
Error:
body: "<!DOCTYPE html>↵<html lang=en>↵ <meta charset=utf-8>↵ <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">↵ <title>Error 404 (Not Found)!!1</title>↵ <style>↵ *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}#media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}#media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}#media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}↵ </style>↵ <a href=//www.google.com/><span id=logo aria-label=Google></span></a>↵ <p><b>404.</b> <ins>That’s an error.</ins>↵ <p>The requested URL <code>/analytics/v3/data/realtime/ids=ga%(my_id)&metrics=rt%3AactiveUsers&dimensions=rt%3Amedium</code> was not found on this server. <ins>That’s all we know.</ins>↵"
headers:
content-length: "1662"
content-type: "text/html; charset=UTF-8"
date: "Tue, 16 Feb 2021 20:30:23 GMT"
server: "ESF"
__proto__: Object
result: false
status: 404
statusText: null
__proto__: Object
Related
I am wondering if is possible to perform this action:
I have a site (Wordpress built on Elementor). I will periodically add some content on the site, and once I add/change content on page can I force refresh somehow for all that users that are watching that page?
The question may not be for stackoverlow but looking for help as I wasn't able to find what I am looking for.
An answer to this question is in plugin called Force Refresh
https://wordpress.org/plugins/force-refresh/#installation
Posting an answer as it may help someone else.
Force reload is something your user can hate. I would like to suggest different approach: Create JavaScript/jQuery code to periodically check eg. if some file exists. Once you want to reload the page, just create the file.
The example should be extended of checking if user already reloaded the page to avoid showing the notice bar again, even the file still exists. You can use cookies for that purpose.
The code below is just to demonstrate the idea, it si not a complex solution.
jQuery(function($) {
//check on load - shloud be removed
checkFileExists();
//call function every 5 minutes
setInterval(function() {
checkFileExists();
}, 1000 * 60 * 5);
//check if a given file exists
function checkFileExists() {
var http = new XMLHttpRequest();
http.open('HEAD', "https://file-examples-com.github.io/uploads/2017/02/file_example_JSON_1kb.json", false);
http.send();
if (http.status === 200) {
$("#notice-bar").show();
//you can reload the page here, just uncomment the line below
//location.reload(true);
$("#notice-bar").show();
} else {
//File doesn't exists
$("#notice-bar").hide();
}
}
//reload page once the link is clicked
$('#reload').click(function() {
location.reload(true);
});
});
#notice-bar {
position: absolute;
display: none;
top: 0;
width: 100%;
height: auto;
text-align: center;
padding: 0.5em;
background-color: #FFDDA9;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="notice-bar">
<p>New version available. Please reload the page.</p>
</div>
</body>
</html>
I just recently started using R, and the package googleLanguageR - it's great!
I have over 400 .flac files (ca. 20 seconds each) that I would like to convert into text, using gl_speech.
I wrote the following loop:
for (i in files) {
possibleError <- tryCatch({
participantid = str_sub(i, 1, 3)
patha = paste(path_in, i, sep='')
result <- gl_speech(patha,
sampleRateHertz = 44100L,
customConfig = my_config)
transcript2 <- subset(result$transcript, select=-c(languageCode, channelTag))
transcriptid <- cbind(participantid, transcript2)
write_delim(as.data.frame(transcriptid),file.path(path_in,paste0(participantid,'_text.csv')))
},
error = function(e) e)
if(inherits(possibleError, "error")) next
}
For completeness, my_config is:
my_config <- list(audioChannelCount = 2,
encoding = "FLAC",
maxAlternatives = 30,
languageCode = "en-US",
model = "video"
)
I do this for 2, 5 or 10 files at a time. Several of them return errors.
The error message is:
ℹ 2020-10-08 20:07:56 > Request Status Code: 408
Error : lexical error: invalid char in json text.
<!DOCTYPE html> <html lang=en>
(right here) ------^
<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
<title>Error 408 (Request Timeout)!!1</title>
<style>
*{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}#media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}#media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}#media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
</style>
<a href=//www.google.com/><span id=logo aria-label=Google></span></a>
<p><b>408.</b> <ins>That’s an error.</ins>
<p>Your client has taken too long to issue its request. <ins>That’s all we know.</ins>
However, when I later run the files that returned errors individually, gl_speech does not return this error.
Is there a different way to loop over several files that will avoid as many errors?
I'm trying to develop a very simple mobile web app to show a list of websites via iFrame.
The app starts always in protrait mode and when it switches to landscape mode, the width of the iFrame is not updated, so the iframes does not fill the device width when rotating in landscape mode. I added the script in HTML to force the app to reload the iframe in case of orientation change, hoping it would have solved the issue, but without success.
This is my HTML code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
<script>
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
window.location.reload()
},
}
onload = addNumber;
</script>
<iframe id="wc1" src="http://<url>" seamless></iframe>
<iframe id="wc2" src="http://<url>" seamless></iframe>
<iframe id="wc3" src="http://<url>" seamless></iframe>
<iframe id="wc4" src="http://<url>" seamless></iframe>
</body>
This is my CSS code
html, body {
width:100%;
height:100%;
padding:0;
border:0;
margin:0;
}
iframe {
width:100%;
height:100%;
padding: (0, 0, 0, 0);
}
I'm a mobile web development newbie and I swore that I tried every single solution I found on SO and other sites to make my code working, but without success.
you have set javascript as :
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
window.location.reload()
},/*<= what is this bracket closing, and why extra comma???*/
}
onload = addNumber;
remove evrything and just keep this :
window.addEventListener("orientationchange", function() {
window.location.reload();
}, false);
also, for pure html way to check orient, add this in you head :
<meta http-equiv="refresh" content="1">
check this thread too => Detect change in orientation using javascript
So I'm having a strange issue with my responsive websites when switching from portrait to landscape mode on my iOS device. You can take a look at the live site here: http://www.aptify.com
If you view the site in portrait mode, then rotate the iOS device it's zoomed in.
I currently have the following meta:
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
I found one question similar to this: Media Queries - Landscape Mode on iPhone way too oversized, however the question was never given a correct answer. The only answer did mention using something similar to my tag above, but it was only: <meta name="viewport" content="width=device-width" /> without initial-scale=1.0 - does this make a difference?
I would also like to note this does not happen on android devices, only iOS devices.
Anyone have and fixed this issue before?
Thanks for your help!
I've included a link in the notes to help with that situation. Another way to fix it is use the code outlined in Jeremy Keith's "Orientation and scale" article.
<script type="text/javascript">
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}
</script>
If you want to ignore your users rights and not allow them to zoom on their devices you could also set the meta viewport to the following which will solve the problem
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I have an image of a comment bubble showing on the index page inside an article p tag which shows how many comments have been added. RoR3 keeps throwing an error and it has me stumped!?
For some reason its looking in the path stylesheets/images/comment.png - when it should only be looking in /images/comment.png as per the Ruby code block. Any suggestions on where I have gone wrong?
_article.html.erb
<div class="article_header">
<b>Article Title: </b> <%= truncate(article.title, :length => 50) %>
<div class="com-bub">
<img src="/images/comment.png"/>
</div>
<div class="com-cnt">
<%= article.comments.count %>
</div>
The css:
.com-bub {
float:right;
background: url('images/comment.png') no-repeat;
margin: -8px 16px 0px 0px;
}
Error:
SQL (0.2ms) SELECT COUNT(*) FROM "articles" WHERE (published = 't')
Rendered layouts/_footer.html.erb (1.5ms)
Rendered layouts/_usernav.html.erb (1.3ms)
Rendered articles/index.html.erb within layouts/application (190.1ms)
Completed 200 OK in 289ms (Views: 193.7ms | ActiveRecord: 3.6ms)
Started GET "/stylesheets/images/comment.png" for 127.0.0.1 at Fri May 27 13:44:43 +0100 2011
Started GET "/stylesheets/images/comment.png" for 127.0.0.1 at Fri May 27 13:44:43 +0100 2011
Started GET "/stylesheets/images/comment.png" for 127.0.0.1 at Fri May 27 13:44:43 +0100 2011
Started GET "/stylesheets/images/comment.png" for 127.0.0.1 at Fri May 27 13:44:43 +0100 2011
ActionController::RoutingError (No route matches "/stylesheets/images/comment.png"):
Rendered /opt/local/lib/ruby/gems/1.8/gems/actionpack-3.0.5/lib/action_dispatch/middleware/templates/rescues/routing_error.erb
within rescues/layout (0.7ms)
your path is incorrect, it should be:
background: url(/images/comment.png) no-repeat;
You need the leading / just like in your markup, also you do not need ticks in your css.
Use a relative link:
background: url(../images/comment.png) no-repeat;
This will take into account scenarios where you deploy to a sub URI (e.g.: www.example.org/myapp/)