I have 3 SPAs within one bigger project written by DuraldalJS (called A). Can A has 3 shell.js to load for each SPA? Thanks.
This is possible. You can create three files, e.g. shellA.js, shellB.js and shellC.js.
Per SPA you must create a server page, e.g. IndexA.html, IndexB.Html and IndexC.html.
You can create a global javascript settings object in each page:
<script>
var mySettings = mySettings || {};
mySettings.entrance = 'viewmodels/shellA';
</script>
<script src="/js/requirejs/require.js" data-main="/app/main"></script>
In main.js you can configure your Durandal app like so:
var mySettings = mySettings || {};
app.setRoot(mySettings.entrance, 'entrance');
Related
I have tried to add auto-ads to my website which uses Vue.js but there are no requests via the script.
I have tried the vue-adsense plugin, which can be found on npm https://www.npmjs.com/package/vue-google-adsense
but they have no support for auto-ads, normal ads work fine with this plugin.
This is the code which needs to be added:
<script data-ad-client="ca-pub-0990618353003742" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Is there a solution for adding auto-ads on a vue.js site?
Script tags cannot be placed in a part of the DOM controlled by an instance of Vue(). All you need to do is place the script in the <head> of your document. If you are using Vue CLI to create your project, the file you do this in is /public/index.html.
You can init your ads how many you've added after change data. For example.
mounted: function () {
this.data = [1,2,3,4];
var adCount=3;
for (var i = 0; i < parseInt(adCount); i++) {
window.setTimeout(function () {
console.log('vue ad ' + i + ' inited');
(adsybygoogle = window.adsybygoogle || []).push({});
}, 300);
}
},
I was recently asked to change a script that is on this shopify website but I am unable to find it in either the backend settings or the actual code for the template. Could someone please point me in the right direction on how to change the code for this script? The pixel values are wrong here and it's causing SEO issues:
<script>
//<![CDATA[
(function() {
function asyncLoad() {
var urls = ["\/\/productreviews.shopifycdn.com\/assets\/v4\/spr.js?shop=myshop.myshopify.com","\/\/www.beetailer.com\/javascripts\/beecart.js?shop=myshop.myshopify.com","https:\/\/media.conversio.com\/scripts\/shopify.js?shop=myshop.myshopify.com","https:\/\/s3.amazonaws.com\/lastsecondcoupon\/js\/freeshippingbar.js?shop=myshop.myshopify.com","\/\/facebook.shopifycdn.com\/tracking_pixels\/123.js?shop=myshop.myshopify.com","\/\/facebook.shopifycdn.com\/conversion_pixels\/123.js?shop=myshop.myshopify.com","\/\/notifyapp.io\/js\/1463319629\/loader.js?shop=myshop.myshopify.com","https:\/\/embed.tawk.to\/widget-script\/58065fec304e8e75855e4cce\/default.js?shop=myshop.myshopify.com","https:\/\/www.affiliatly.com\/shopify\/shopify.js?affiliatly_code=AF-10200\u0026shop=myshop.myshopify.com"];
for (var i = 0; i < urls.length; i++) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = urls[i];
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
}
window.attachEvent ? window.attachEvent('onload', asyncLoad) : window.addEventListener('load', asyncLoad, false);
})();
//]]>
</script>
This code is included by Shopify as a part of the {{ content_for_header }} Liquid variable in the layout files (e.g. theme.liquid.)
The JavaScript files would be ScriptTag scripts that have been added to the store by Shopify apps that you have installed. For example https://productreviews.shopifycdn.com/assets/v4/spr.js belongs to the Product Reviews app.
These scripts are hosted by the app developers so you won't be able to edit them directly. You can remove a ScriptTag script by uninstalling the Shopify app that placed it there.
It looks like the function above is loading the java script (.js files) dynamically in the code and adding the script to the domain:
var urls = ["\/\/productreviews.shopifycdn.com\/asse....
You would need to download the .js files (url are listed in the code), modify them, and change the path so that the above function can load them from a local path.
Following array is URL to all the JS scripts... Each of the item in this array is loaded after page loads.
var urls = ["\/\/productreviews.shopifycdn.com\/assets\/v4\/spr.js?shop=myshop.myshopify.com","\/\/www.beetailer.com\/javascripts\/beecart.js?shop=myshop.myshopify.com","https:\/\/media.conversio.com\/scripts\/shopify.js?shop=myshop.myshopify.com","https:\/\/s3.amazonaws.com\/lastsecondcoupon\/js\/freeshippingbar.js?shop=myshop.myshopify.com","\/\/facebook.shopifycdn.com\/tracking_pixels\/123.js?shop=myshop.myshopify.com","\/\/facebook.shopifycdn.com\/conversion_pixels\/123.js?shop=myshop.myshopify.com","\/\/notifyapp.io\/js\/1463319629\/loader.js?shop=myshop.myshopify.com","https:\/\/embed.tawk.to\/widget-script\/58065fec304e8e75855e4cce\/default.js?shop=myshop.myshopify.com","https:\/\/www.affiliatly.com\/shopify\/shopify.js?affiliatly_code=AF-10200\u0026shop=myshop.myshopify.com"];
I saw there is somes questions related to mine (like this interesting one), but what I wonders is how to do it correctly, and I couldn't find it via the others questions or the RequireJS documentation.
I'm working on a quite heavy web application that will run in only one html page.
Before RequireJS, I used to do a lot of JS modules with public methods and connecting them via the on event on the Dom READY method, like this :
var DataList = function () {
this.base = arguments[0];
this.onUpdate = function (event) { ... }
}
$(function () {
var dataList = {}; DataList.apply(dataList, [$('#content')]);
$('table.main', dataList.base).on ('update', dataList.onUpdate);
});
With RequireJS, I can easily see that I can split DataList and all others classes like this on individual files, but what about the $(function () {}); part?
Can I still keep it this way, but instead of the DOM ready function of jQuery, I put the events on the main function() of the RequireJS, when my primary libs are loaded?
Or do I have to change the way I create JS "classes", to include a init function maybe, that will be called when I do a, for example :
require(['Datalist'], function(dataList) {
dataList.init($('#content'));
});
What annoys me the most is that since I have only one html file, I'm afraid the require() will have to load a huge list of files, I'd prefer it to load just libs that, them, would load sub libs required to work.
I don't know, the way of thinking with RequireJS lost me a bit :/
How would you do?
"Can I still keep it this way, but instead of the DOM ready function of jQuery, I put the events on the main function() of the RequireJS, when my primary libs are loaded?"
If you separate the functions or 'classes' into modules then you can use the RequireJS domReady function:
require(['module1'], function(module1) {
domReady(function(){
// Some code here ftw
})
});
The benefit here is the domReady function will allow downloading of the modules instantly but won't execute them until your DOM is ready to go.
"Or do I have to change the way I create JS "classes", to include a init function maybe, that will be called when I do a, for example"
You won't need to change the way you interact with your code this way, but you can probably improve it. In your example I would make DataList a module:
define(function(require) {
var $ = require('jquery');
var DataList = function () {
this.base = arguments[0];
};
DataList.prototype.onUpdate = function() {
};
return DataList;
});
require(['data-list'], function(DataList) {
var data = {};
// Call DataList with new and you won't need to set the context with apply
// otherwise it can be used exactly as your example
new DataList(data);
});
"What annoys me the most is that since I have only one html file, I'm afraid the require() will have to load a huge list of files, I'd prefer it to load just libs that, them, would load sub libs required to work."
Make your code as modular as you want/can and then use the optimiser to package it into one JS file.
I'm dynamically building a series of dojox.mobile.ListItem widgets under a statically defined dojox.mobile.RoundRectList widget via this function...
function displayOpps(items) {
// Create the list container that will hold application names
var rrlOppsContainer = dijit.byId("rrlOpps");
// Add a new item to the list container for each element in the server respond
for (var i in items){
// Create and populate the list container with applications' names
var name = items[i].CustName + " - " + items[i].OppNbr;
var liOpps = new dojox.mobile.ListItem({
label: name,
moveTo: "sv3OppDetail"
});
// Add the newly created item to the list container
rrlOppsContainer.addChild(liOpps);
}
}
When I run this code during onLoad() in my html file, I get the following error using Chrome's dev tools...
Uncaught TypeError: Object # has no method 'byId'
I've read numerous articles around this topic and it appears that lots of folks have this problem, but each that I have found are in relation to some other technology (e.g., Spring MVC, etc) and I'm attempting to use it w a dojox.mobile based app. That said, I attempted to mimic some of the solutions brought up by others by including this in my html file, and it still doesn't work...
<script type="text/javascript"
data-dojo-config="isDebug: true, async: true, parseOnLoad: true"
src="dojo/dojo.js">
dojo.require("dojox.mobile.RoundRectList")
</script>
What am I doing wrong?
Thank you in advance for your time and expertise.
If you are using Dojo 1.7+, you probably just forgot to require the "dijit/registry" module. This where the byId function is defined. When you use desktop widgets, this is loaded indirectly by other base modules, but with dojox/mobile you must load it explicitly (because dojox/mobile loads only a very minimal set of modules by default, to minimize code footprint).
Depending on how you wrote your application, do this:
dojo.require("dijit.registry"); // legacy (pre-1.7) loader syntax
...
var rrlOppsContainer = dijit.byId("rrlOpps");
...
or this:
require(["dijit/registry", ...], function(registry, ...){ // 1.7+ AMD loader syntax
...
var rrlOppsContainer = registry.byId("rrlOpps");
...
});
Note also that your second code sample tries to use asynchronous loading (async: true) while it uses the legacy loader syntax. This won't work, to get async loading you must use the AMD syntax.
Google's own site seems to provide conflicting documentation.
I've found at least 4 variations for adding A custom cookie to GA.
http://www.google.com/support/forum/p/Google%20Analytics/thread?tid=6a452bd09455721a&hl=en
http://code.google.com/apis/analytics/docs/gaJS/gaJSApiBasicConfiguration.html
http://www.google.com/support/forum/p/Google%20Analytics/thread?tid=4362f4d46e6e723a&hl=en
http://analytics.blogspot.com/2009/07/segment-your-traffic-with-user-defined.html
Here is the code I currently have embedded in my company's sharepoint site. I'm beginning to think that this will not work, and that I will have to create an "employee.html" page on my public webserver that I will have to request all employees load once to generate the cookie on their PC's. My secondary question, is after I setup a employee.html page as the example http://analytics.blogspot.com/2009/07/segment-your-traffic-with-user-defined.html here describes, how do I keep all the external traffic from accessing that same page?
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20842347-1']);
_gaq.push(['_setCustomVar',1,'visitor-type','employee']);
_gaq.push(['_setDomainName', '.sc-pa.com']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</HEAD>
None of those links talk about setting a custom cookie. Also, it seems to me that you aren't really needing to set a custom cookie. It looks like you are just wanting to be able to segment your traffic into different buckets.
You can do this many different ways, one of which you have in your code example: you can set a custom variable with different values, depending on the type of user.
So it would set the same cookie, etc.. and you pass different values in this line of code
_gaq.push(['_setCustomVar',1,'visitor-type','employee']);
Then in your reports you can setup filters based off of custom variable 1, or look at the custom variable reports directory, or use custom variable 1 as a metric in your reports.