Single Page Application Issues - javascript

I'm creating a single page application by loading HTML pages inside div element on button click events.
For example :
function loadHome(){
document.getElementById("home-pane").innerHTML='<object type="text/html" data="pages/home.html"></object>';
$("#about-pane").hide();
$("#blog-pane").hide();
$("#forum-pane").hide();
$("#contact-pane").hide();
$("#home-pane").show();
};
Because of it, the URL of application will not change. I'm afraid I would not qualify for Google Ads in case of Single Page Application. Please suggest me an alternative solution so that I would be able to generate different URLs on different click events (Home, About, Contact, Blog etc.) and would able to access those pages via separate links.
I'm kind of new to all these stuff, but I would love to implement all your suggestions and make an extra source of income.

As suggested by #Rory in the comments, you can use the History API
What I would do is, in onclick, just pushState a new URL to the history
Then attach a listener that fires whenever the URL changes. That listener would look at the URL and decide based on it, which 'page' to render.

Related

Add FB pixel event code into button - Squarespace

I am new to squarespace.
My client wants to track the page views for this, I have injected Base pixel code to header of all pages and it worked perfect,
But now she wants to track , if the user click on any buy button on this page
I have no idea how to inject facebook pixel code to a button in squarespace, any idea or reference would be highly appreciated .
Thanks
It sounds like what you want to do is add an "Event Code" either:
A) to the page that the user sees after clicking the button, or
B) to the button itself.
If you're going with the prior option (A), then you'd want to make sure that the page upon which the user lands does in fact indicate the event you're tracking and that users do not arrive to that page for any other purpose. That is why I would lean towards the latter option (B).
You can read more about adding an event code here, and here, but in summary:
Events are actions that happen on your website, either as a result of
Facebook ads (paid) or organic reach (unpaid). The event code lets you
track those actions and leverage them in advertising.
There are two types of events you can send:
Standard events. 9 events we're able to track and optimize your ads for without any additional actions...
Custom events. Actions that are important to your business, but that you can’t use for tracking and optimization without additional action...
...
If you were to consider these buttons to be an "Add to Cart" type-of-action, then you'd use the AddToCart event. To do so, you could use Javascript similar to the following:
<script>
window.Squarespace.onInitialize(Y, function() {
var btns = document.getElementsByClassName("sqs-block-button-element");
var i;
for (i=btns.length-1; i>=0; i--) {
btns[i].addEventListener("click", function() {
fbq("track", "AddToCart");
});
}
});
</script>
You could inject this code using per-page code injection or via site-wide code injection. I would recommend the prior, otherwise all buttons on your site will execute the fbq event code, which is probably undesirable.
Regardless of whether you use site-wide or per-page injection, you may want to better target the buttons using a more specific selector. For example, you could use querySelectorAll and target by href attribute. However, if you use per-page injection, the code I supplied should work; it will apply it to every button on that page.

Change links before or when clicked? GA Cross-domain tracking

I have a situation where I have to manually decorate a specific link across my entire website with the Google Analytics linkerParam.
This is to pass the GA client ID from my main site over to my ecommerce site in order to maintain the session.
Normally this would occur automatically through the auto linker settings but there is a server-side redirect page that sits between my site and the ecommerce site.
That redirect page would pass along the GA client ID but it's never given a chance because it's a page on my domain and not the external domain. Auto linker won't work in that situation which is why I need to manually do it myself.
The solution that I've been given basically adds a javascript addEventListener to each link to the redirect page.
That solution does work.
Is it better to use the addEventListener for when people actually click on the specific link to only then decorate that link with the linkerParam?
Or is it better to simply modify each link when the page initially loads?
Thanks
In my custom linkers I decorate the link only after is has been clicked. My reasons (which you may or may not find convincing) are:
if a user hovers over a link I do not want him to see an attached client id
since search engines now execute javascript they might index decorated links
I can decorate links only after they are actually on the page (but I can attach a callback function to links that are created after the fact), so if a user leaves before DOM ready the link is not decorated
On a page with lot's of links decorating all of them actually takes some time and performance for something that I do not really need (after all I only need the clicked link decorated)
As to Ithans comment above (where I think he referred to the DOM rather than the sinister sounding "doom"), since the user leaves the page in any case after clicking the link (you would not decorate in-page linking), so multiple DOM operations are not an issue.
You can change all the links when the page load
something like
var linksToChange = document.querySelectorAll('.theLinkClass');
for (var item of linksToChange ) {
item.href= "http://google.es";
};

Can I load new content using AJAX, but change the URL in the omnibar?

I don't want to use hashbangs, or shebangs, as they are known. I want to do it the way Facebook does. You click on Profile, the bar remains unchanged and the content is loaded using AJAX. I was wondering if the new HTML5 History API could be used.
EDIT: I think I'm going to go ahead and dive into HTML5's history API. Keeping the question open in case anyone has better suggestions.
The HTML 5 history API is the right way to go.
see here: https://www.new-bamboo.co.uk/blog/2011/02/03/degradable-javascript-applications-using-html5-pushstate/
The pushState and replaceState methods will allow you to change the URL without making an HTTP request. The difference being that pushState pushes a new state on to the history stack, while replaceState replaces the item at the top of the stack.
Also take a look at jquery-pjax
You don't need to do that. You can just prevent the default action from occuring. For instance, with jQuery we have;
function(event) {
event.preventDefault();
// this is different from event.stopPropogation()
// do some stuff
}
this will prevent the link's default action (following the url) from occurring.
P.S. I've always heard shebang refers specifically to this: #!, and not just #, but I could be misinformed...

Can JavaScript hook and override browser back and forward buttons?

We're writing a web app to act as a control panel for our back end, we're solely using JavaScript - All DOM elements are created dynamically, no static HTML at all.
We have a module/plugin type interface, a module is a collection of "views" - A view is essentially a function that contains an initialize method which accepts an arg of a div so it knows where to draw itself.
As a user browses between views, we maintain a history of where they've been and where they are etc. so we can provide back/forward navigation between views as well as saving the state of the views as they navigate.
We provide a breadcrumb trail as well as back and forward buttons. What I'd also like to do is hook the browser back/forward buttons so we can intercept clicks and override it so it browses through the history we're maintaining - When they get to the very first page of the history we're maintaining we would of course not override and let them navigate away from our site.
Is there a common way to do this? Or do browsers explicitly prevent this sort of thing?
Thanks
Use Ben Alman's great jQuery-bbq plugin: http://benalman.com/projects/jquery-bbq-plugin/ which provides a hashchange cross-browser that is used in conjunction with back/forward buttons.

Google Analytics External Link Tracking

I'm using event tracking to monitor external links, but I'm wondering if the tracking will be done before the link is fired. I'm using the onclick:
onclick="_gaq.push(['_trackEvent', 'Banners', 'Clicks', 'Banner Name (ID: 101)']);"
Any ideas, or better ones if that's a bad way?! Thanks!
Darren.
Your implementation is fine, and it's exactly how Google recommends.
but I'm wondering if the tracking will
be done before the link is fired. I'm
using the onclick
the event won't be tracked until the user clicks the link, once they do that it's a race between the event tracking and next page load starting. Usually your event will be tracked, but sometimes it is not. There are two mostly similar methods to avoid the race condition:
Google's recommendation.
My recommendation.
Both help articles don't really address the async option, but it doesn't take much changing.
If you are using jQuery and want to automatically track all external links check out the script in this answer: https://stackoverflow.com/a/12326388/984780
Also not it uses the async method of invoking Google Analtyics. Also you can easily tweak the timing to ensure that the event gets tracked.

Categories