I was looking to setup Google AdSence to monetize my multi-page site, and was wondering if would be ok if I placed the script externally so I can easily edit it and delete it on all pages if necessary.
The code I would but in the location I want the ad:
<script src=”ad-1.js”></script>
And I would copy the AdSence code (Minus the < Script > tags) into the “ad-1.js” file.
Would this be breaking any AdSence rules? Also, is there any way to avoid Ad blockers from blocking the ads?
Edit: I signed up for AdSence, and searching the docs and Google finds me no additional information. Does anyone know if this violates any rules?
How exactly ad-1.js will look like? Note that the tag is <ins> element with a <script> tag. You can't just put <ins> element in ad-1.js file as <ins> is HTML and and you can put only JS code in the JS file. You would need to put something like:
document.write('<ins class="adsbygoogle" ...');
But generally using blocking scripts in HTML is discouraged as it prevents browser from efficiently parsing and evaluating the page. If your goal is to be able to disable ads with one change - I'd suggest instead puttin <ins> tags and then, when you need to disable ads, you can add .adsbygoogle { display: none; } style to some common CSS file used across all your pages. That will effectively prevent ads from loading.
Answering some of your questions:
Would this be breaking any AdSence rules?
No, it doesn't break rules. You can place <ins> tags from JS.
Also, is there any way to avoid Ad blockers from blocking the ads?
AdSense doesn't provide feature for that. There probably some libraries that can help you detect whether user has adblock installed and do something based on that. For example show some banner asking user to disable adblocker.
So, I found an answer, and posting it here for others that may come across this question.
You can use the jQuery "Get Script" command, like this:
In the HTML file:
//Calls jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
//Calls external js file
<script src="/header.js"></script>
header.js:
$.getScript( "LINK TO CALL GOOGLE ADS" )
ANY ADDITIONAL CODE THAT GOES INSTIDE THE <SCRIPT> TAG GOES HERE
Related
I'm using a low-code development platform called WaveMaker right now, and it gives you the option to customize the "markup" of the page (HTML, but you can't really edit <head>; the whole thing is kind of weird), the Javascript of the page, particularly with events like onpageload, etc., the style of the page (CSS), and the page's variables (JSON). I'm trying to embed Formstack forms, but every time the Markup section encounters a <script> tag, it deletes everything after the end of the tag. This is what the markup page looks like. I contacted support and they seemed to indicate that this was on purpose. Is there any way to make HTML run script included in-line without saying <script>? PS: I would be able to embed using iFrames, but for some reason the iFrames aren't working on the iPhone test program, even though they're working on the simulator.
What you can do is put it inside an HTML event attribute.
<body onload="/*your JS here*/">
</body>
If that does not work, try attaching onload to another HTML element or try one of the other event handlers (though I believe that they should have taken this into account as well)
How about this :
<body onload="javascript:(function(){
// you can place your code here it should run
alert('ok')
})()">
</body>
In Avatao's Senior Web Security Career Path, there is a hacking task, where you need to insert malicious javascript code - but the <script> is tag filtered (other tags aren't). Aenadon's answer gived me one solution:
<body onload="your JS here"> </body>
After submitting that, I checked the official solution, and I found that:
<img src="x" onerror=alert('xss')>
While testing page loading time on https://developers.google.com/speed/pagespeed/insights/?url=aishwat.com it says
Eliminate render-blocking JavaScript and CSS in above-the-fold content
and lists down few javascripts (which you may look at link provided)
Now, I am using these as base scripts angular.min.js, angular-animate.min.js, angular-aria.min.js, angular-material.min.js
And they need to be loaded in this particular order (one can't load angular animate before angular)
The question is how to make them non blocking ?
I have already kept them outside head block
Source code : https://github.com/aishwat/aishwat.com/blob/develop/public/index.html
Plz have a look at source page
The PageSpeed insight site has a good documentation what you can do to prevent it.
To make your javascript non-blocking you can add the async or defer attributes to your script tags. To maintain the order it is recommended to use defer.
<script defer src="my.js">
I see your <script> tags are outside of your <body>, this is not valid HTML so I recommend putting them back at the head or somewhere in your body.
I have the optimisation problem — my site uses 2 (pretty large) javascript resources:
application.js (minimised jquery, jquery-ui, underscore-js and some shared scripts, 120KB total)
controller-specific file (some modules required for the page + interactions, 4KB total)
I have some scripts in the views that format/convert markup with JavaScript (dependable on both jQuery and my controller-specific JS code) so I need to wait either for $(document).ready or head.ready and it makes the part of website invisible to prevent the flash of unstyled content :(
Now my question comes: should I use head.js for it or just stick with the "before " scripts? Are there any smart ways to speed up page loading time in this case?
Update:
Here's the part of the code (see versusio.com for full code, landing page):
<html>
<head>
... usual stuff
<link (css stuff) />
<script src="head.js"></script>
<script>
// Here some global variables are set like cache keys, actual locale code etc., not dependable on jQuery or any other JS code from the JS assets
</script>
</head>
<body>
... page content
<div id="search">!-- here some code with the "display: none" style to prevent flash of unstyled content</div>
<script>
// Here is code that positions and processes some styles and adds some interactions to the #search div
Application.Position.In.Center($(#search), $(document));
</script>
... more page content
... another "display: none" div and accompanying script
... rest of the page content
<script type="text/javascript">head.js( { 'application': 'application.js' }, { 'landing': 'landing.js' } );</script>
</body>
</html>
First ask yourself this question: Do i really need all this javascript loaded when a user visits my page?
When first loading your website, you actually only need the autocomplete-functionality, the rest isn't needed on load. So you could go for a seperated approach. My advice would be the following:
Build this page without any javascript-functionality and then enhance it with javascript, get rid of the inline styles and scripts.
After you have done this, load the scripts you actually need, you can do this in the head or just before the end of the body
Use a CDN for Jquery, jquery-ui, underscore and the other libraries. If a user already loaded these libraries from another website, you have a performance bonus.
Last of all, already asynchronously load the javascript needed later on, so the user already has the scripts when he hits the compare-button.
Small tweaks:
Use a tool like ySlow or the networking graph in your favorite browser to look for any bottlenecks. It looks like gzipping is not enabled, try and do that.
Do you really need to load the facebook/google/twitter/third-party stuff in the head or could that be done when the page is loaded?
Is the server as fast as possible? It looks like it takes almost halve a second to get the HTML.
I hope i helped you out for a bit, good luck with the performance tweaking!
You could put mask layer that cover all pages with fixed style, then hide or destroy it when loading process finished. That way there's no need to hidden each content, instead it will be covered with mask div
I think, put a load scripts on the bottom of the page (as the last tags in the body). That javascript it will not block the drawing page, like now.
Saw the view source of your page.
There are some inline scripts which can block rendering. Such as this
Application.i18n = {"comparisons":{"off_ratio":
More here. http://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/
Quick way: Moving them to the end of body tag.
Best way: They should be loaded as external scripts - with very good cache headers.
May be, you are doing that as - you have to load those messages based on user locale - You can create separate JS files for every locale during your build process - an they can be linked / loaded as external JS files with good cache headers
Another reason, why you might need inline scripts - to take note of the initial loading time. which is not necessary - as the modern browsers provide us with perfomance timings.
http://www.html5rocks.com/en/tutorials/webperformance/basics/
Moving it as an external script file - will also be good for your site security - in case, if you will be trying CSP.
http://updates.html5rocks.com/2012/11/Content-Security-Policy-1-0-is-officially-awesome.
Defer / async attributes.
ga.js is set with async attibute - but other JS files can be tried with defer attributes. Also, as a general rule of thumb, delay loading resources as far as possible,load only when it is needed.
window.onload - $.ready
Starting your script execution with $.ready is always going to be better than window.onload.
because, window.onload fires only after all the images, inner iframes gets loaded.
The following links might be useful.
https://developers.google.com/speed/
The Progressive JPEGs post in http://calendar.perfplanet.com/2012/
http://blog.chriszacharias.com/page-weight-matters
http://www.igvita.com/2013/01/15/faster-websites-crash-course-on-web-performance/
A lot of further optimisations are possible. All the best.
I've tried creating a new post on my Wordpress blog and I've pasted an external code from a site, which has a <script src="..."></script> in order to work.
When I publish my post, the script tag simply gets deleted.
Is this a default behavior in Wordpress? Is there any way to avoid this? (preferably without doing any modifications to Wordpress or using inline code).
No this is not default behaviour in wordpress. I have added <script> tags to the html view of a page or post no problem.
Did you switch the view after you add the code ? If so, don't. Wordpress will delete all tags if you switch to view back from HTML.
Like Tim said, you probably posted the code into the Visual Editor (doesn't accept any HTML tags, like scripts). You should to the HTML editor to implement your code, but if you want to have it on more than one page, you should open up the Appearance Editor and paste it into your theme where you need it (most likely in the header).
If you put the script code in html and then switch to the visual editor, it will delete the script. This is a commonly reported problem and is the default behavior of wp.
Wordpress assigns Roles to Users, Users who are either Administrators or Editors can add javascript codes within posts. If the User's role is Author or Contributor then they can not add javascript codes inside posts, even if these users try to add Javascript in HTML mode, wordpress automatically removes the tags.
I have a javascript for a specific page that I do not wish to be loaded in my header section. Is it possible to load it in the section of the HTML.
Currently I have all my js code inside the but I want to remove it to a seperate js file that I can load.
I tried using this but it did not work.
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.5.1.min.js"></script>
Thanks
Q1 : I have a javascript for a specific page that I do not wish to be loaded in my header section. Is it possible to load it in the section of the HTML.
-Yes you can load javascript any where you want, if writing inline code then make sure you add script tag around your code.
-also you can request files like in body
Q2: Currently I have all my js code inside the but I want to remove it to a seperate js file that I can load.
-- no problem in that, thats even better practice.
Q3 Requesting external file
to request external files you write below written fashion
<script src="http://file_name.js" type="text/javascript"></script>
It's not only possible (ref), it's frequently a good idea.
Putting your scripts as late in the page as possible, which frequently means just before the closing </body> tag, means the browser can parse and display your content before stopping to go download your JavaScript file(s) (if external) and fire up the JavaScript interpreter to run the script (inline or external).
Putting scripts "at the bottom" is a fairly standard recommendation for speeding up the apparent load time of your page.
Yes it is possible. Try and see.
For debugging, hardcode the jquery full path.
It is sometime recommended to load it at the end of the of the body, to make the main content of the page load faster.
Is it possible to load it in the section of the HTML.
Yes.
From the spec:
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
SCRIPT is among the elements that may be a child of the BODY elements. Numerous other elements may also have SCRIPT children.
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.5.1.min.js"></script>
When I run echo base_url() I get my the hostname of my server. This would result in a URL such as example.comjs/query-1.5.1.min.js. You probably should drop that PHP snippet entirely and just use: src="/js/jquery-1.5.1.min.js" which would resolve to http://example.com/s/query-1.5.1.min.js.
Yahoo engineers recommendation for higher performance is to include your scripts at the end of your HTML, just before </body> tag. Therefore, it's even better.
To see where the problem is, you gotta first make sure that your js file is loading. User Firebug and go to scripts tab. Do you see your script? If not, then something is wrong with your path.
it should work...
Did you try to view the generated source and see if the PHP code indeed generated the right path?
beside that, it is recommended to load jQuery from a CDN such as google's :
https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js