Followed a tutorial and added google analytics to my django site by placeing the tracking code into the head of my base.html as well as a different page that does not extend from base.
<!DOCTYPE html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-trackcode"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-trackcode');
</script>
</head>
However the other day I ran a facebook ad and sent over 200 clicks to my site, google only tracked 30 of these clicks. And when viewing my pages it does not seem to properly track individual pages and only tracked 3 pages, the majority of the traffic is just under the root domain.
(its a blog style site so i need to see exactly what pages users are most interested in)
Related
I am using default cache setting which is 24hours.
However, when I refresh the page, I see updated html page every time. Why the file is not cached for 24hrs. I didn't set any invalidation mechanism.
Here's the URL: https://dhr5io29ip73w.cloudfront.net/
html file content:
<html>
<h1>Test</h1>
<p id='myTime'></p>
<script>
var d = new Date().toLocaleTimeString();
document.getElementById('myTime').innerHTML = d;
</script>
</html>
Your page includes JavaScript. The JavaScript code runs in the web browser. That means each time you load the page, your web browser executes those JavaScript statements in the <script> tag which includes updating the page with the current time.
CloudFront just caches the raw HTML of the page. It doesn't cache the rendered result.
I've got my first Django app in production and would like to setup Google Analytics to see pageviews/timespent/etc by page title for the order flow. I've added the GA javascript to the of my base.html template with the hope that it would track each page with page title.
However, when I look at Google Analytics, I only see page views by my root domain 'mysite.com', and I cannot get get page views by '/app/pagetitle1', '/app/pagetitle2', '/app/pagetitle3', etc. 'app' is the Django app that the root domain gets redirected to 'mysite.com/app'. I'm assuming that Google Analytics would show entire path after root domain, if it were to work.
It seems like there is probably something simple I've overlooked, and would appreciate any advice.
Here's the GA tag I put in base.html right after per GA instructions:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XXX');
</script>
Each template extends base.html as follows:
{% extends "base.html" %}
{% block content %}
<section class="container container-interior">
etc - rest of <body>
I made two changes to address lack of page title and double counting.
Remove this gtag call from my base.html template
gtag('config', 'G-ID',{'send_page_view': true});
Added this to each page that I wanted to track using a block tag.
gtag('event', 'page_view', { page_title: '', page_path: ', send_to: '<G-ID'> })
I am trying to embed an AWS Quicksight dashboard into our application but I am having some trouble with the embed process. The URL has been generated correctly and but I get a permission denied error when I attempt to embed it.
I am able to load the generated URL directly in a new tab but when I attempt to embed it I get a 401 error.
I have whitelisted the domain in the Quicksight console and am accessing the page over HTTPS. The complete test page is shown below.
The following code is what I am using to test embedding. It was taken from an Amazon example.
<!DOCTYPE html>
<html>
<head>
<title>My Dashboard</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk/dist/quicksight-embedding-js-sdk.min.js" ></script>
<script type="text/javascript">
function embedDashboard() {
var containerDiv = document.getElementById("dashboardContainer");
var params = {
url: "<link that works in a standalone browser tab>",
container: containerDiv,
parameters: {
},
height: "700px",
width: "1000px"
};
var dashboard = QuickSightEmbedding.embedDashboard(params);
dashboard.on('error', function(err) {console.log('dashboard error:', err)});
dashboard.on('load', function() {});
}
</script>
</head>
<body onload="embedDashboard()">
<div id="dashboardContainer"></div>
</body>
</html>
Amazon sends a 302, followed by a 401. Which results in a frame with the error message "We can't display this page (Not Authorized).
The first request in the image fetches a fresh link from the server and the subsequent two are the framing attempt.
I would expect that if something was wrong with my authorization then a loading the link in it's own tab would not work. I think the issue must be with the frame but don't know what other options to check beyond the whitelist.
Does anyone have any idea what else I can try?
I've got the blog (http://loveclubhouse.blogspot.com/).
(1)
I added one like-button on top of my blog. This is global like-button for the whole blog. It's available from every page of my blog, so that users may express their attitude to the blog in general (doesn't matter which post of the blog they read at the moment).
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Floveclubhouse.blogspot.com%2F&action=like&...></iframe>
I use facebook's Open Graph. So, when the user clicks on this like-button the story is created on his facebook's wall with the title, description, and preview-image that was previously defined in the Open Graph's Meta tags of my blog.
<meta content='DJ Club Mixes 2012' property='og:title'/>
<meta content='blog' property='og:type'/>
<meta content='http://loveclubhouse.blogspot.com/' property='og:url'/>
<meta content='Blog's cover image URL' property='og:image'/>
<meta content='Blog's description' property='og:description'/>
(2)
In addition to the global like-button I have also added standard "addthis" share-buttons for every post of my blog (let's say the user wants to share on his wall a certain post from my blog).
<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
<a class='addthis_button_facebook'/>
...
</div>
<script type='text/javascript'>
var addthis_config = {ui_click:true, data_track_clickback:true};
</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d68d12853670207' type='text/javascript'/>
However, when the user clicks on share-button for post, the facebook generates the story on his wall with the same preview-image and title that was set up for the whole blog.
The question is:
How to combine (1) and (2), so that the user may like my blog in general and the user may share specific posts on his wall with the title and preview-image for this particular post?
It's all about the OG tags on your page. When a user visits a different page in your blog, you need to be sure that the og:title and og:description (and og:image if you want) are updated to reflect the current article of your blog.
There are lots of questions about how to get a Facebook Like button working, but I would like to know: does anyone know of an example of the Facebook Like button, coded in XFBML and Javascript, where clicking on it makes the comments box show up, in Internet Explorer? Specifically, I'm trying to figure out if this behavior is broken on IE. I know that particular behavior works under Firefox and Safari.
I see examples of the iframe version of the Like button that pops the comments box in IE when you click "Like". But that's the iframe version, not the xfbml / javascript version. Also, (weirdly enough) the iframe version of the Like button doesn't display the comments box if you don't have show_faces turned on.
The Levi's site is sort of the gold standard in Like usage. Check out http://us.levi.com/family/index.jsp?categoryId=4305605&cp=3146842.3146844.3146854 -- the Like button with comments works in Firefox and Safari, but not IE.
There are lots of different moving pieces here to track down -- for example, namespaces, app_ids, xhtml doctype, etc, etc. But before I get that far, I'm just wondering if the javascript / FBML version of the Like button with comments ever works under IE? And if does, is there an example somewhere? I have never seen one.
Thanks!
Yes, I have this working in IE on http://www.WasupPalmSprings.com. If you click on any of the stories from the home page, there is a like button at the bottom that shows the comments box in IE.
I have had issues with the comment box not showing in IE on other sites. Here is the checklist I use:
Make sure you have the right xmlns attrs in the HTML tag on your page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http:// www.facebook.com/2008/fbml" xmlns:og="http:// opengraphprotocol.org/schema/">
Make sure you have <div id="fb-root"></div> somewhere on your page.
Make sure you have set up an app for your webpage because you need an app id. If you don't have an app, create one here: http:// www.facebook.com/developers/
Use javascript to load the Facebook connect javascript file. Do not just drop a <script src="..."> tag on the page. If you use jquery or similar, ideally this would go in the onReady handler. Otherwise, put it in <script> tag at bottom of the page.
Be sure to substitute your actual app id from the Facebook app you create where it says 'INSERT YOUR APP ID HERE'
window.fbAsyncInit = function() {
FB.init({appId: 'INSERT YOUR APP ID HERE', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Add meta tags with open graph information for your page.
<meta property="og:title" content="YOUR PAGE TITLE HERE"/>
<meta property="og:site_name" content="YOUR WEBSITE NAME HERE"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="URL OF PAGE HERE"/>
<meta property="og:image" content="URL OF IMAGE YOU WANT TO SHARE"/>
<meta property="og:description" content="YOUR PAGE DESCRIPTION HERE"/>
<meta property="fb:app_id" content="YOUR FB APP ID HERE"/>
Finally add the like button wherever you want it to appear on the page. Be sure to substitute your own page URL.
<fb:like href="INSERT YOUR PAGE URL HERE" layout="button_count" show_faces="false" width="570" font="arial"></fb:like>