I am trying to add Google Analytics tag to all the pages in a MadCap Flare project.
The way to do this is to add the tag to de MasterPage, but MadCap Flare does not allow me to add the Google tag. If I remove the async attribute it works, but I think it is not a good idea:
If I try to add this snippet to the target configuration, I have also an error:
In both ways MadCap Flare does not allow me to save the changes.
NOTE: I am using MadCap Flare 2017 r3 (could be a bug in this version?)
XHTML requires to use
async="async" there, it should probably solve your issue.
We're using a variable for the tracking code in our masterpage so our script looks like this:
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=[%=Products.TRACKINGCODE%]">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[%=Products.TRACKINGCODE%]');
</script>
Related
When I tried to include the stripe dependency only for the template where I need it (in laravel blade):
#push ('head_scripts')
<script src="https://js.stripe.com/v3/"></script>
#endpush
..I got the error 'ReferenceError: Stripe is not defined'. So I included it in my main "head" partial, so it was included everywhere. Then I ran into the same error when going into the admin section, because it's not included in that template.
But does it really need to be included everywhere?
It is only used in one vue component like this:
<script>
let stripe = Stripe(`pk_test_zzzzzzzzzzzzzzz`);
let elements = stripe.elements();
let card = undefined;
This component seems to be evaluated even when it isn't rendered. Can I get around this issue in some way?
I was having this problem in a Vue app not using Laravel.
But to fix it i put the script <script src="https://js.stripe.com/v3/"></script> in my index.html
Then when referencing Stripe in a component i used window.Stripe That pointed to the script and fixed the ReferenceError: Stripe is not defined error.
Putting script in my index.html worked, but gave me performance issues when I published because it loads the script on every single page, instead of just where it's needed.
So instead I used import {loadStripe} from '#stripe/stripe-js/pure';. It delays loading Stripe until loadStripe is called.
This article helped me use the import:
Importing Stripe.js as an ES Module into Vue
I have some web components created using stenciljs. When I include them in the html from the beginng everything work fine, see example
<codext-gradient-button color="darkblue" class="hydrated">Gradient
Button - Darkblue</codext-gradient-button>
<script type="text/javascript" src="https://unpkg.com/#codext/stencil-
components#0.0.6/dist/gradient-button.js"></script>
https://jsfiddle.net/vqe7wchb/1/.
But when I add dynamically the component the operation fails, see example
<script>
let script = document.createElement('script');
script.src = "https://unpkg.com/#codext/stencil- components#0.0.6/dist/gradient-button.js";
document.head.appendChild(script);
</script>
<codext-gradient-button color="darkblue" class="hydrated">Gradient Button
- Darkblue</codext-gradient-button>
https://jsfiddle.net/vqe7wchb/2/.
I did open a bug in the stenciljs project on github, you may find there more details https://github.com/ionic-team/stencil/issues/1429.
This is an issue for the es5 bundle loader for older web browsers. In case anyone is having trouble with this make sure you dynamically append the script as the last item on the page, otherwise it will fail to lazy load additional scripts.
I posted the issue on the stencil github: https://github.com/ionic-team/stencil/issues/1981
I'd like to be able to use Jquery in my Enduro.js project, but there is not a single sample using it on github Enduro.js page
Libraries seem to be loaded in Enduro.js using RequireJS, wth the line found at the bottom of the default index.hbs :
{{!-- <script data-main="/assets/js/main.js" src="/assets/vendor/requirejs/require.js"></script> --}}
and the following code found un "assets/js/main.js" by default in all Enduro.js samples :
require.config({
baseUrl: '/assets/',
paths: {
// 'jquery': 'vendor/jquery/dist/jquery.min',
},
})
require(['jquery'], function ($) {
$(document).ready(function () {
console.log('requirejs ready to use')
})
})
The Jquery "path" line is commented out, and there is no /vendor directory in /assets by default.
Is there an automated way to install jquery in Enduro.js or is it just simply about creating by hand a /vendor folder, and copying /Jquery inside it ?
Well, there are many ways to use JQuery in Enduro. I'm not sure if it is the best way to import it (it could exist better ones).
In my current project, I'm using the CDN for reasons of efficiency. If you have no problem using CDNs I'd recommend it.
just copy this code:
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
And then, paste it just before closing the body tag.
Another way is to create a folder inside /assets/js called 'vendor' and there, you cat put the jquery-3.3.x.min.js (Or whatever version you would like to use). Of course, you have to download it first from the official site.
After doing that, you just have to import it via HTML (before closing body tag):
<script src="assets/js/vendor/jqueryfile.js"></script>
NOTE: Creating the folder called 'vendor' is optional, you just could paste the file inside /assets/js. And make sure you type the right path to import it.
NOTE 2: remember that you should never touch the files inside _generated, so if you paste the file inside _genereated/assets/js, everything is going to work, but when you migrate your site to production or anywhere else the app will crash.
Hope this helps.
I'm exploring Electron and I've run into a roadblock. I can't figure out how to load the Dojo Toolkit and use it in Electron.
For example, here is the simple "Hello World" for Dojo:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
That works fine in a browser, but doesn't work at all in Electron. After a couple hours of googling and trying 50 different experiments I've gotten nowhere.
Can someone please enlighten me?
While you can disable node-integration as Shwany said, I believe that will effectively render the ipc modules useless, which will probably pose undesirable limitations since you won't be able to communicate between the main and renderer processes.
However, it is possible, with a bit of finagling, to get Dojo to play nice with Electron. There are only a couple of things you need to do in your entry page.
Firstly, force the host-node has feature to false. This can be done by setting it in dojoConfig.has, e.g.:
var dojoConfig = {
async: true,
has: {
'host-node': false
}
}
Secondly, as Shwany pointed out, Dojo is going to see the already-existing require, so we need to move that out before loading Dojo:
// Move Electron's require out before loading Dojo
window.electronRequire = require;
delete window.require;
After loading dojo.js, you can move Dojo's require elsewhere and move Electron's back, if you wish. Whether you want to do this may depend on how you intend to code the client side of your application. Ostensibly, Dojo's global require is never needed, since you can request a context-sensitive require in any defined module via the 'require' module ID.
If you want to see a scaffolded Electron application incorporating Dojo, I created a boilerplate a few weeks ago (though be advised it's currently relying on a fork of electron-packager). If you want to see an example of a more full-blown Electron/Dojo application, I wrote a music player called Nukebox a couple of months ago which uses Dojo and dgrid (though its scaffolding is a bit different than the newer boilerplate).
I have your test code working in Electron.
First, I assume you are trying to load dojo.js from the web. //ajax.googleapis... etc will probably attempt to pull the file from the file system. I added http: to the front of it. That allowed me to open a .html file in the browser and work. I am not sure if that was an oversight or not.
Secondly, because the browser-window has node-integration on by default, 'require' is already defined and it does not understand what you are passing to it because it expects a path not an array. If you construct your browser window with node-integration turned off it should work:
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600, "node-integration": false});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
});
Note the "node-integration": false. This may cause additional issues if you want to use node integrations in your app. However, your code should work.
I have exactly the same problem as the person here.
I know how to solve it. You're supposed to change the following in the jQuery Tools.js, right?
find:
$.fn.tabs = function(query, conf) {
change to something like this:
$.fn.fpTabs = function(query, conf) {
My problem is that I just can't find that line anywhere, not even with the search function of my editor!!
I've downloaded the newest version of Flowplayer.org's jQuery Tools and I uploaded it to pastebin: http://pastebin.com/ispnQMVH
Can you help me figure out how to do this?
If there's a nother way to prevent jQuery-ui tabs to inferfere with jQuery Tools tabs, then please let me know :)
Thanks a lot in advance!!
I'm putting this down as an answer because it would be a mess in a comment.
Looks like you can grab the unminified source from Github:
https://github.com/jquerytools/jquerytools
You could also try a quick hack to rename the tabs plugin in situ. If you load the jQuery Tools Tabs JavaScript file, then load a little patcher like this:
(function($) {
// Rename the tabs in-place.
$.fn.fpTabs = $.fn.tabs;
delete $.fn.tabs;
})(jQuery);
and then load jQuery-UI:
<script src="/js/jquery.js"></script>
<script src="/js/jquery.tools.min.js"></script>
<script src="/js/jquery.tools.tabs-renamer.js"></script> <!-- see above -->
<script src="/js/jquery-ui.min.js"></script>
You'll have to change the names of course but it should work if you load things in the above order.