We're running a service on our-site.com. Our customers can either use the service "stand alone" by simply linking from their-site.com to our-site.com/customer-service or by embedding our service via iFrame into their-site.com. Imagine visiting GMaps directly vs. seeing it embedded in an IFrame.
Visiting "foreign" page with our service in IFarme
Beginning with Chrome 80 (i guess) our Google Analytics stopped working when the service runs inside the iFrame. Chrome is giving me this (quite clear) message:
A cookie associated with a cross-site resource at http://our-site.com/ was set without the SameSite attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
Also I don't see anything in the GA realtime overview if I visit their-site.com with our our-site.com/customer-service embedded in the iFrame.
If I manually disable the 2 features same-site-by-default-cookies & cookies-without-same-site-must-be-secure in chrome://flags and visit their-site.com with our-site.com/customer-service embedded in the iFrame I do see the page visit in the GA realtime overview.
Visiting our service "stand alone"
When directly visiting our-site.com/customer-service GA is still working just fine:
No warnings in dev tools
Multiple cookies associated to GA are shown in dev tools > applications tab
I can see page visits in the GA realtime overview
Neither of the cookies has the Secure or SameSite value set (all "blank")...
Question
Is there anything I can do to make GA work again when running inside an iFrame on a foreign domain?
Example code
I just created a very simple test environment which also shows the issues described above:
our-site.com/customer-service
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={tracking-id}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag("js", new Date());
gtag("config", "{tracking-id}");
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>our site service</title>
</head>
<body>our-site.com/customer-service</body>
</html>
their-site.com
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>their-site.com</title>
</head>
<body>
<iframe src="https://www.our-site.com/customer-service" style="width: 500px; height: 500px;"></iframe>
</body>
</html>
Even this very simple example shows the behavior described above, where opening our-site.com/customer-service directly, shows data in the GA realtime overview and opening their-site.com doesn't...
Answer from the Google tag manager support forum:
When accessing a first-party cookie (_ga) in a third-party context (the iframe), one has to explicitly add cookieFlags with the value samesite=none;secure.
Detailed description for various scenarios can be found at this blogpost.
Related
I'm adding a LinkedIn share button to my site. The URL that needs to be shared includes a parameter, but LinkedIn is stripping the parameter from the URL. Any way to get around this?
I've tried using a custom share URL e.g.
http://www.linkedin.com/shareArticle?mini=true&url=https://stackoverflow.com/questions/10713542/how-to-make-custom-linkedin-share-button/10737122&title=How%20to%20make%20custom%20linkedin%20share%20button&summary=some%20summary%20if%20you%20want&source=stackoverflow.com
I've also tried using their share plugin e.g.
<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://website.com/?par=1"></script>
Neither option is working for me. The URL just defaults to the root domain.
LinkedIn no longer supports those parameters.
2010:
https://www.linkedin.com/cws/share?url={url}
2016:
https://www.linkedin.com/shareArticle?url={url}&title={title}&summary={text}&source={provider}
2020:
https://www.linkedin.com/sharing/share-offsite/?url={url}
Unfortunately, we will have to survive with only a url parameter.
Source: Official Microsoft LinkedIn Share API Docs.
But, if you want to show a preview of some site info on the share page, before the user clicks to share it, you can use og: tags...
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
Source: LinkedIn Developer Docs: Making Your Website Shareable on LinkedIn.
And when you're all done: Test it with the LinkedIn Post Inspector.
jsConsole would be a WONDERFUL tool if I could only get it to work. My code (both on a dev server as well as a public server (cloaked for security) both show 404 errors using the script line:
<script src="https://jsconsole.com/js/remote.js?9c43f243-b257-4cef-b56d-de5386fddbcd">
As such, it is never making the connection. I tried it in jsBin.com as well but it didn't work (I don't have an account or I would put it there too). There were no errors listed on jsBin.com that I could see. I'm lost...
Here's the procedure that I followed from HERE (my inputs are bolded):
Opened browser to: https://jsconsole.com/
Use :help to show jsconsole commands
version: 2.1.2
:listen 9c43f243-b257-4cef-b56d-de5386fddbcd
Connected to "9c43f243-b257-4cef-b56d-de5386fddbcd"
>
It presented me with the following script which I inserted the following two lines
<script>console.log("Hello world");</script>
<script src="https://jsconsole.com/js/remote.js?9c43f243-b257-4cef-b56d-de5386fddbcd">
into my test code directly above the closing tag and added the javascript line inside the body like so:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://jsconsole.com/js/remote.js?9c43f243-b257-4cef-b56d-de5386fddbcd"></script>
</head>
<body>
<script>console.log("Hello world");</script>
</body>
</html>
The remote feature is not supported anymore. Unfortunately the documentation lies about it, the listen command is still there as if it worked, and the resulting error is not helpful either.
I guess it was good while it lasted.
I am using a LAMP stack web server running on Ubuntu 16.04. In my web root directory /public/ I have a few files, but the two important ones concerning my problem are:
index.html
main.build.js
The web page is a single page application. index.html "opens up" the SPA via the main.build.js, which contains the whole SPA. However, after I made changes to the main.build.js the changes does not apply to the webpage's main.build.js.
What I've tried:
Tried multiple browsers
I have tried clearing the cache & cookies of my browser(s)
Opening up the main.build.js that I made changes to make sure they were there (and they were)
Deleting the main.build.js completely (but it still shows up on the webpage!!!)
Restarting Apache
Restarting the computer
Index.html:
<html lang="en">
<head>
<title>BiggerWe (Alpha)</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<script src="plotly-latest.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script src="main.build.js"></script>
</body>
</html>
Any tips are welcome. Thanks!
According to this answered question you need to disable the PageSpeed features of the LMAP Stack and maybe the OPCache feature in php.ini by setting opcache.enable from 1 to 0
I am using a proxy that allowed me to get a free internet from my mobile company
the problem is
some times I have to send so many request to a web application to finally get
200 ok http response
see this picture for more illustration
successful requests are in black and a failed request are in red
to keep a longer session with a certain web application i have to reload it every five minutes or so
so is there any other solution rather than reloading the web page to maintain a longer session ?
Just create an html file, change url that you want to open in iframe, save and open in browser.
<!DOCTYPE html>
<html>
<meta http-equiv="refresh" content="60" >
<body>
<iframe src="http://yourwebsite.com">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
You can do this without Javascript, with metatag.
<meta http-equiv="refresh" content="5" >
I am writing a flex3 tool for our uber-geeks. The tool is for futzing around with sharing URLs to various various social sites.
private function submitRequest(evt:Event):void {
var requestURL:URLRequest = new URLRequest(constructURL());
requestURL.method=URLRequestMethod.POST;
var header:URLRequestHeader = new URLRequestHeader("og:title", "petertitle");
requestURL.requestHeaders.push(header);
navigateToURL(requestURL,"_blank");
}
I want allow the developer to manipulate the following meta headers in the outgoing html request when navigateToURL() is called.
<meta property="og:title" content=title" />
<meta property="og:description" content="description" />\
<meta property="og:image" content="......" />
<meta property="og:video" content="......"/>
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="480" />
Unfortunately google is not showing me any example of how to add the above meta headers to my instance of URLRequest in flex. AND the new URLRequestHeader is blowing up.
ArgumentError: Error #2096: The HTTP request header og:title cannot be set via ActionScript.
at global/flash.net::navigateToURL()
Can someone point me at an example of putting the meta headers into a URLRequest?
additional
Looks like I am in a catch 22 situation.
I wrote the app to run in a flash player.
apparently the flash apps run from flashbuilder are not permitted to perfom http PUT method operations. it alwasy does GET
flash apps run from flashbuilder will not write headers on http GET calls.
But I am still not finding a way to add an http "meta" header tag in flex... perhaps adobe air.
Current work around.
I can call an external javascript function that will do a post, but however the XmlHttpRequest infrastructure only want to setRequestHeader(key,value), and seems to need to be from a very specific list of strings. setRequestHeader("foo","bar") did not add a foo header in my outgoing request.
There does not seem to be a way to add the header meta tag. via javascript. Or at lease I am not finding it off of google.
Hoping someone can now point me at how to do that?????
Do either of these help (appears the first one is particularly relevant, otherwise in the second a work-around is offered):
How can i send custom headers with URLRequest
Custom headers possible with URLRequest/URLStream using method GET?
What a pain. I would have thought someone would have run into this before and posted such a solution
setRequestHeader(arg1, arg2) ouptputs "< arg1 arg2 />" in the outgoing http request
so if I
xmlhttp.setRequestHeader("meta","property=\"og:description\" content=\"description\"");
then the outing html
<head>
....
<meta property="og:description" content="description"/>
....
</head>
<body>
....
</body>