I am trying to send events to Google Analytics v4 property from a local application. I am testing with code inside a local html file (see code below).
If I deploy this file on a webhost, I can see incoming events in GA DebugView after loading page - as expected.
It does not work, if I open this file locally. If this code does not work locally, it also won't work in some electron app, right? Or have I misunderstood something? If it works on a webhost but not locally - does anything have to be configured differently in Google Analytics?
If executed locally, in developer console I get error messages like this:
Tag fired: {function: "__get", vtp_eventName: "scroll", vtp_settings: ["map", "streamId", "G-XXXXXXXXXX", "eventParameters", ["map", "percent_scrolled", ["macro", 19]]], vtp_deferrable: false, tag_id: 29}
Unallowed document protocol.
Event processing aborted.
index.html
(... with replaced measurement ID as G-XXXXXXXXXX)
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
<script>
function fire() {
gtag('event', 'ACTION', {
'event_category': 'CATEGORY',
'event_label': 'LABEL',
'value': 1
});
}
</script>
</head>
<body>
page loaded ...
<button onclick="fire()">fire event!</button>
</body>
</html>
Related
I tried to apply some of these settings.
Some work, some don't.
//_Layout.cshtml
#using Microsoft.AspNetCore.Components.Web
#namespace BlazorApp1.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="BlazorApp1.styles.css" rel="stylesheet" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
#RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<environment include="Development">
<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
Blazor.start({
configureSignalR: function (builder) {
let c = builder.build();
c.serverTimeoutInMilliseconds = 5000;
c.keepAliveIntervalInMilliseconds = 2500;
builder.build = () => {
return c;
};
},
reconnectionOptions: {
retryIntervalMilliseconds: 500,
maxRetries: 25
}
});
});
</script>
</environment>
<environment exclude="Development">
<script src="_framework/blazor.server.js"></script>
</environment>
</body>
</html>
[above Code edited to reflect comment.]
Note: the important part is the 2nd script tag, which follows <script src="_framework/blazor.server.js" autostart="false"></script>. Also note, that in this variation I use the DOMContentLoaded event, but some examples simply omit this and only use Blazor.start(...), which IMHO both are valid, and I did not notice any difference so far.
Sidenote: Some sources say that the JS for Starting Blazor should/can be placed in _Host.cshtml. I assume from the project structure, that both styles are valid options. (_Host.cshtml is simply the #RenderBody and holds the App-component, which should result in roughly the same final DOM).
and
//program.cs
builder.Services.AddServerSideBlazor(options =>
{
options.DetailedErrors = true;
}).AddHubOptions(options =>
{
options.ClientTimeoutInterval = TimeSpan.FromSeconds(30);
options.EnableDetailedErrors = true;
options.HandshakeTimeout = TimeSpan.FromSeconds(15);
options.KeepAliveInterval = TimeSpan.FromSeconds(1);
//options.MaximumParallelInvocationsPerClient = 1;
//options.MaximumReceiveMessageSize = 32 * 1024;
//options.StreamBufferCapacity = 10;
});
Test when clicking "PAUSE" in VS Debug-Mode:
When I pause the App in VS, the reconnect UI shows:
Attempting to reconnect to the server: 6 of 35
But each attempt takes over 1:30 minutes (not always the same time)!
Another Test showed: one attempt ~40sec another over ~90sec.
Another Test showed: the first few (5) took a longer time but then for the remaining it was ~7sec consistently.
Specifically maxRetries: 35 works as expected every time, but it seems to me retryIntervalMilliseconds: 1000 does not work at all.
Why is that, what can I do that each attempt takes the same time, and how can I reliably set it up?
Maybe a working example?
Specifically, I'd like to have a setup where each attempt really runs quickly (<1000ms) and a lot of them.
Are there some min values maybe, if so, where is the documentation on that?
[Edit]:
I ran more tests with a remote PC:
With very different results for the time taken of each attempt, depending on how the connection is disturbed.
Firewall (all always 20s)
Wi-Fi (first one 10s then 0.5s)
Browser offline mode (all always 0.5s)
VS Pause / Stop (inconsistent ~40s, ~90s)
Console Output:
I've got an idea to run Flutter app on WebOS. I've downloaded the latest WebOS sdk and a Simulator (as they already deprecated the Emulator)
I've created a simple Hello World app that simply uses HTML and it ran just fine on the Simulator. Then I decided to add a logic for running Flutter app to it. So now the compiled app structure is like this
The content of the index.html is as follows
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="flutter_iz_tube_tv">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>IZ Tube TV</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = '3924677883';
</script>
<script src="flutter.js" defer></script>
<script src="webOSTVjs-1.2.4/webOSTV.js" charset="utf-8"></script>
<script src="webOSTVjs-1.2.4/webOSTV-dev.js" charset="utf-8"></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
And here is the content of appinfo.json
{
"id": "com.example",
"version": "0.0.1",
"vendor": "Test TV",
"type": "web",
"main": "index.html",
"title": "tv_app",
"icon": "icon.png",
"largeIcon": "largeIcon.png"
}
This app runs fine in browser if I use a web server.
But the problem starts when I load it on a WebOS Simulator using App button on RCU.
I just cannot run. And the problem is, obviously, because it uses a simple file: protocol instead of running an http server.
I've googled a lot and haven't found a solution to this.
Does anyone know how to run an app like this in simulator?
I've found out it's impossible to do in a Simulator. But there is a workaround. We can add a redirection to the "head" part of index.html file like this (https://webostv.developer.lge.com/develop/app-developer-guide/hosted-web-app/):
<meta http-equiv="refresh" content="0;url=http://0.0.0.0:8080/index.html">
Thus effectively redirecting it to the remote app. And WebOS can display a Flutter app
My Flutter web app provides 2 error messages after deploying to firebase. The error messages were not appearing prior deployment. I can not find the root cause.
main.dart.js:39105 Uncaught TypeError: Cannot read property 'isSupported' of undefined
at aaA.a2R (main.dart.js:47197)
at Object.aP_ (main.dart.js:22954)
at main.dart.js:10007
at aGN.a (main.dart.js:5110)
at aGN.$2 (main.dart.js:38004)
at Object.H (main.dart.js:5096)
at aHW (main.dart.js:10032)
at main.dart.js:97159
at main.dart.js:97153
at dartProgram (main.dart.js:97156)
(index):1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://*****.web.app/') with script ('https://*****.web.app/flutter_service_worker.js'): A bad HTTP response code (404) was received when fetching the script.
The app is functioning when run under web render without any issue.
My guess comes from the firebase JavaScript files does provide error message with stored in Firebase.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="***">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="*/*** Store">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<meta name="google-signin-client_id" content="234259997949-29sp95o3qnl5s9ofdl0ib2eb7mho1avm.apps.googleusercontent.com">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>Eletanco Store</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
****
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<!-- include only the Firebase features as you need -->
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-functions.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-remote-config.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-performance.js"></script>
<!--
initialize the SDK after all desired features are loaded, set useEmulator to false
to avoid connecting the SDK to running emulators.
-->
</body>
</html>
I found the solution
I removed the following
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
I upgraded all the javascript links and launched again Firebase Initiates.
I'm creating extension using crossrider. In this extension I want to open a new tab with html from resources. Its opening page in new tab without issues. Now I want to add js & css to that, that to available in resources. Kindly help in adding css & js.
code in background.js
appAPI.openURL({
resourcePath: "troubleShooter.html",
where: "tab",
focus: true
});
in troubleShooter.html
<html>
<head>
<link media="all" rel="stylesheet" type="text/css" href="css/ie.css" />
<script type="text/javascript" src="js/ie.js"></script>
</head>
<body>
</body>
</html>
Crossrider recently introduced the ability to open a new tab with HTML from resources. However, such pages cannot directly access other resource file using link and script tags embedded in the HTML.
Though in it's early release, one of the features of the HTML page is the crossriderMain function that runs once the page is ready. In this early release, the function supports the following Crossrider APIs: appAPI.db.async, appAPI.message, and appAPI.request.
Hence, even though in this early release there isn't a direct method to add resource CSS & script files to the resource HTML page, you can workaround the issue by loading the resources into the asynchronous local database and applying it to the HTML page using standard jQuery. For example:
background.js:
appAPI.ready(function() {
// load resource file 'style.css' in to local database
appAPI.db.async.set('style-css', appAPI.resources.get('style.css'));
// load resource file 'script.js' in to local database
appAPI.db.async.set('script-js', appAPI.resources.get('script.js'));
// open resource html
appAPI.openURL({
resourcePath: "troubleShooter.html",
where: "tab",
focus: true
});
});
troubleShooter.html:
<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
appAPI.db.async.get('style-css', function(rules) {
$('<style type="text/css">').text(rules).appendTo('head');
});
appAPI.db.async.get('script-js', function(code) {
// runs in the context of the extension
$.globalEval(code.replace('CONTEXT','EXTN'));
// Alternatively, run in context of page DOM
$('<script type="text/javascript">')
.html(code.replace('CONTEXT','PAGE DOM')).appendTo('head');
});
}
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
style.css:
h1 {color:red;}
script.js
console.log('CONTEXT:: script.js running');
Disclaimer: I am a Crossrider employee
I've been attempting to implement the new Facebook open graph features with my flash app. My swf is calling the JavaScript function I have on my page (tested with the simple alert()), however I don't see the post going through on my timeline nor am I getting the response alert(). I've also tested my website with the Facebook object debugger and it tells me that the og:url, og:type, and og: title properties are required, but not present(even though they are in my code).
<meta name="fb:app_id" content="<%=appId%>" />
<meta property="og:type" content="MYNAMESPACE:Game Achievement" />
<meta property="og:title" content="GaveAchievementTitleHere" />
<meta property="og:image" content="https://www.example.com/image.jpg" />
<meta property="og:description" content="description" />
<meta property="og:url" content="https://www.example.com/index.aspx"/>
<meta property="game:points" content="42" />
<meta property="game:secret" content="1" />
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
function postAction(namespace,actionName,objectName,url)
{
//alert("postAction("+namespace+","+actionName+"."+objectName+","+url+")");
FB.api('/me/'+namespace+':'+actionName+
'?'+objectName+'='+url+'&access_token='+<%=Access_Token%>,'post',
function(response)
{
if (!response || response.error)
{
alert('Error occured');
}
else
{
alert('Post was successful! Action ID: ' + response.id);
}
});
};
</script>
Check that you have "App Domain" defined in your Application basic settings, and that your OpenGraph object url is within this domain.
(I had this kind of issue and setting the AppDomain fixed it. By the way, for an achievement Facebook uses "game.achievement" as object type)