I thought a hit counter would be simple enough as it's a pretty basic piece of code to insert to a html page, however when I add statcounter to my rails app, all the navigation links break. Can anyone advise me as to the best way to insert something like this to my app?
It works but when I click on a nav link, it just displays the hit counter on a blank page unless I reload the page or , if I use the invisible hit counter, it displays an empty page for whatever nav link I click.
application.html.erb
<!--
* Statcounter to monitor visitors, etc to my webapp
* #reference https://statcounter.com
-->
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=11051099;
var sc_invisible=0;
var sc_security="0e87dbf6";
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="shopify
analytics" href="http://statcounter.com/shopify/"
target="_blank"><img class="statcounter"
src="//c.statcounter.com/11051099/0/0e87dbf6/0/"
alt="shopify analytics"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->
Related
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)
I am trying to solve an issue with modals. What I want to do is allow the user to click the browser's back button to dismiss a modal and return to the original state of the page, this is: without modal. For such purpose I thought about using HTML 5 history API.
I started trying to append a querystring parameter to the URL, such as http://...page.html?show_modal=[yes|no] but I ended leaving this approach because I couldn't handle all the stuff involving popstate event, pageshow event, etc. I couldn't make it work and it overwhelmed me.
Then I tried with a more simple approach involving a hash appended to the URL, such as http://...page.html#modal, and the hashchange event. This approach is working better for me and I almost have it.
When the user clicks the button to show the modal, he or she can click the browser's back button and it will dismiss the modal. Furthermore, after that, the user can click the browser's forward button and it will show the modal again. Very nice! The user can also navigate directly to the URL with the hash to access directly this state of the page, as well as he or she can bookmark such state of the page. It's working pretty neat and I'm rather happy with the results.
The problem is that it is not working totally perfect. When the user dismiss the modal by clicking the background, the ESC key or the X in the upper right corner, the history starts to mess up. Try it: open the modal by clicking on the button, then click the background to dismiss it (look a the URL in the address bar, first problem here is that the hash isn't removed), then click your browser back button and you will see it isn't working correctly. You will end with a duplicate in your history and you have to click the back button twice in order to go to the previous page. This is not desirable from an UX viewpoint. Does anyone know a solution to this?
I provide my code in this CodePen and at the end of this question. I suggest trying it in your own machine and NOT IN Codepen, so you can view the hash in the URL, etc. Also, it doesn't work in Codepen Full mode, I don't know why.
Thanks!!
I am using Foundation 5.2.1
HTML
<div class="row">
<div class="small-12 columns">
<h1>Reveal Modal</h1>
<h2>Manipulation of the browser history for a better UX</h2>
<a class="button radius" href="#" data-reveal-id="sampleModal" id="button">Show Modal...</a>
</div>
</div>
<!-- ############# -->
<!-- MODAL -->
<!-- ############# -->
<div id="sampleModal" class="reveal-modal medium" data-reveal>
<h2>Hi!</h2>
<p>You may think you are on a new page now, but you aren't. Try to click your browser <kbd>Back</kbd> button to dismiss this modal and return to the the page you were viewing.</p>
<a class="close-reveal-modal">×</a>
</div>
JavaScript
function setModalHash(url, present) {
var a = $('<a>', { href:url } )[0]; // http://tutorialzine.com/2013/07/quick-tip-parse-urls/
var newHash = "";
if (present === true) {
newHash = "#modal";
}
// Build the resulting URL
result = a.protocol + "//" + a.hostname + ":" + a.port + a.pathname + a.search + newHash;
return result;
}
$("#button").on('click', function() {
history.pushState(null, null, setModalHash(document.URL, true));
});
$(window).on("hashchange load",function(e) {
// Handling also the load event allows navigation directly to http://host/path/to/file#modal and bookmarking it
if (document.location.hash == "#modal") {
$("#sampleModal").foundation("reveal","open");
}
else {
$("#sampleModal").foundation("reveal","close");
}
});
I've been messing with the history api/History.js in combination with session storage to maintain modal state, and open/close based upon user navigation. I've finally achieved about 90% of my goal, but history is implemented very poorly in Safari and iOS Safari so remove the features for these browsers.
Some of the problems you may be running into with the hash approach is that when you use the # with pushstate it actually doesn't push a new object into the history state. It sometimes seems to push history onto the stack and you could use history.back() to fire a popstate, but if you were to say refresh the page with your hashurl and do some sort of check for hash on page initiation, there doesn't seem to be a new history pushed onto the stack, and therefore on backwards navigation the user will leave the site rather than closing the modal.
Here is my implementation working for all browsers except for where it falls back to normal behavior is Safari:
http://dtothefp.github.io/hosted_modal_history_sample/
https://github.com/dtothefp/html5history_express_modal_toggle
Like I said I use History.js in combination with sessionstorage because annoyingly enough, in the popstate for closing the modal the history object is removed, which is exactly when I would need it. In all a very poorly implemented API.
I don't change the URL because this project does not have a backend, so if I change the URL with no hash, on page refresh the page would not be found. An alternate implementation would be a query string, which will properly update history when used in the pushstate, but ends up being bad UX because if the user closes the modal not using the backwards navigation (i.e. hitting the cancel button or clicking off), removing the query string would result in a page refresh.
I have the following HTML page which works perfectly fine as a HTML page; however when I try put it into APEX by entering the code into a Region it just goes all wrong.
When the submit button is pressed, it takes the user to a new page with the IFRAME on rather than just refreshing the page as it does in a HTML page. The other issue is the aesthetics, it looks perfect in Firefox but in IE the IFRAME is half way down the page. When investigating in Firebug I see no attributes which would cause this.
Is there a method of embedding a HTML page into an APEX form page?
<!DOCTYPE html>
<html>
<body>
<head>
</head>
<form action="http://ukserver/orderlist.asp" target="orderResults">
Enter Order Number: <input id="ord" type="text" name="ord" maxlength="50" size="20"/>
<input type="submit" value="Submit"/>
</form>
<iframe id="orderResults" name="orderResults" src="blank.html" width="100%" height="50%">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
This is the page in FireFox which as you can see looks ok.
This is the page in IE which is incorrect
Update:
The HTML page seems to work perfectly in the HTML header of the APEX page but its above my tabs and region which isnt the place where i want it. I tried to find an order (1112) and it returned the following 'File not found' which is correct.
Hi Tony, I created another IFRAME and i guess I'm half way there. I now just have to get the HTML form working, please see below:
It sounds like you have a PDF file in a folder on a server somewhere for each order. If the names of the files are predictable given the order number then you should be able to generate a link something like this:
1) Create an item to accept the order number e.g. P12_ORDER_NUMBER.
2) Create a button to submit the page
3) Create a report that displays when P12_ORDER_NUMBER is not null and selects:
select '//server/path/fileprefix' || :P12_ORDER_NUMBER || '.pdf' as url
from dual;
4) Convert the report column into a link via the column attributes so that clicking on it launches the file.
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>
hy!
i m trying to use django ajax filtered fields for a many-to-many-relationship (outside the admin! for staff and non-staff users.). i walked through the introduction at the homepage of this add-in and the result is, that i can not make it run :-(
i m wondering what i m doing wrong and hope to find some help here.
thus i included all the stuff that i need. this is my form.
class MarketingActionForm(forms.ModelForm):
contact = ManyToManyByLetter(Contact, field_name="first_name")
class Meta:
model = MarketingAction
exclude = ('created_by',)
class Media:
js = (
settings.ADMIN_MEDIA_PREFIX + "js/SelectBox.js",
settings.ADMIN_MEDIA_PREFIX + "js/SelectFilter2.js",
settings.MEDIA_URL + "js/jquery.js",
settings.MEDIA_URL + "js/ajax_filtered_fields.js",
)
my project urls.py
(r'^ajax_filtered_fields/', include('ajax_filtered_fields.urls')),
(r'^dynamic-media/jsi18n/$', 'django.views.i18n.javascript_catalog'),
the javascript included in my page:
{% load adminmedia %}
<!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
<script type="text/javascript" src="/dynamic-media/jsi18n/"></script>
<script type="text/javascript" src="{% admin_media_prefix %}js/core.js"></script>
all these links do work. i tested it by clicking on the links. thus i think all the needed .js is available.
the first question that i have is:
1) should the tag {% load adminmedia %} create any output? because there is no output in the .html file.
the second question:
2) the following code is created in the .html .
<a class="ajax_filter_choice"
href="javascript:void(0)"
onclick="ajax_filtered_fields.getManyToManyJSON('id_contact', 'crm', 'Contact', 'first_name__istartswith=w', 'None')">w</a>
how i can test whether this ajax call is successfull? or whether this function (ajax_filtered_fields.getManyToManyJSON) can be referenced. because it seems as nothing happens when i click on the link.
the third question:
3) if you click on the link below you see what is already created. i see only one box, and if i click on the links nothing happens. only the contacts which start with "a" are shown.
ok not really a question.. rather more information ;-)
screenshot of the (wrong) result
would be great if this a filtered fields professional read and help me.. thanks in advance!
edit1:
after playing around with firebug i get the two following errors:
SelectFilter is not defined
anonymous()1 (line 424)
anonymous()jquery.js (line 19)
anonymous([function(), function(), function(), 1 more...], function(), Object name=F)jquery.js (line 12)
anonymous()jquery.js (line 19)
anonymous()jquery.js (line 19)
[Break on this error] SelectFilter.init("id_c... "http://localhost:8000/media/admin/");\n1 (line 424)
ajax_filtered_fields is not defined
function onclick(event) { ajax_filtered_fields.getManyToManyJSON("id_contact", "crm", "Contact", "first_name__istartswith=o", "None"); }(click clientX=470, clientY=390)
Now I`m asking myself what i have to add in order that these two functions are available to the page!?
edit2:
Ok it seems as this in the MarketingActionForm is not working:
class Media:
js = (
settings.ADMIN_MEDIA_PREFIX + "js/SelectBox.js",
settings.ADMIN_MEDIA_PREFIX + "js/SelectFilter2.js",
settings.MEDIA_URL + "js/jquery.js",
settings.MEDIA_URL + "js/ajax_filtered_fields.js",
)
But when i print out the urls they are correct. hmm..
Another question to me is why i reference here to "js/SelectFilter2.js" and the generated javascript part in the html references to SelectFilter.js ?
edit3:
the correct urls printed out via print form.media
<script type="text/javascript" src="http://localhost:8000/media/admin/js/SelectBox.js"></script>
<script type="text/javascript" src="http://localhost:8000/media/admin/js/SelectFilter2.js"></script>
<script type="text/javascript" src="http://localhost:8000/media/js/jquery.js"></script>
<script type="text/javascript" src="http://localhost:8000/media/js/ajax_filtered_fields.js"></script>
and these work all. thats strange.
if i add these includes to my base.html the above mentioned errors disappear! Does anybody has an idea why django behaves here this way?
Thus one step ahead. But the next bug is in SelectBox.js:
error: box is null
var SelectBox = {
2 cache: new Object(),
3 init: function(id) {
4 var box = document.getElementById(id);
5 var node;
6 SelectBox.cache[id] = new Array();
7 var cache = SelectBox.cache[id];
8 for (var i = 0; (node = box.options[i]); i++) {
9 cache.push({value: node.value, text: node.text, displayed: 1});
10 }
11 },
id = "id_contact_from"
In line 4 the script is searching for this element in the html body, does not find it and crashes in line 8, since box is Null.
Should this element not be created a utomatically by ajax-filtered-fields? Do i have to provide this element by myself? I did not found anything in the docs about this.
how i can test whether this ajax call is successfull?
Use firebug. its a MUST for any web developer.