Cordova In-App browser opening external scripts - angularjs

//Actual webscript
<script type="text/javascript">
var lhnAccountN = "310904-1";
var lhnButtonN = 38;
var lhnInviteEnabled = 1;
var lhnWindowN = 0;
var lhnDepartmentN = 36316;
var lhnChatPosition = 'bottomright';
</script>
best live chat
<script src="//www.livehelpnow.net/lhn/widgets/chatbutton/lhnchatbutton-current.min.js" type="text/javascript" id="lhnscript"></script>
//the data is storing on session. every time connection is lost.
//so I'm using in-app browser to open the script in ionic mobile app. I'm unable to open the window please help me out
$rootScope.testChat=function(){
var options = {
location: 'no',
clearcache: 'yes',
toolbar: 'yes'
};
var ref=window.open('http://www.livehelpnow.net/products/live-chat-system', '_blank', options);
ref.addEventListener('loadstop', function() {
ref.executeScript({
code:"var lhnAccountN = '310904-1';var lhnButtonN = 38;var lhnInviteEnabled = 1;var lhnWindowN = 0;var lhnDepartmentN = 36316;var lhnChatPosition = 'bottomright';"
})
ref.executeScript({
code:"var chat; chat.src='www.livehelpnow.net/lhn/widgets/chatbutton/lhnchatbutton-current.min.js' chat.id='lhnscript'"
})
})
}
best live chat

Replace window.open() function with cordova.InAppBrowser.open(). You can consult https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/index.html for further info .

Related

Google tag manager not working on initial load

I am implementing Google tag manager for my Laravel-React app and using react as SPA. I return index.blade.php file for all routes.
It is working fine for non logged in users but for logged in users, user_id is not getting set on first page load. When I navigate to other routes, the user_id is set.
I am using API authentication using Laravel passport therefore I am updating the user_id used in index.blade.php from react component.
Here is my code
index.blade.php
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', '{{$google_tag_manager_id}}');
(function() {
window.authUserId = '';
window.dataLayer = window.dataLayer || [];
let interval = setInterval(function () {
console.log('dataLayer-outside', window.dataLayer);
if (window.authUserId) {
console.log('dataLayer-inside', window.dataLayer);
console.log('Auth id-IN5: ', window.authUserId);
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event' : 'login',
'visitorId' : window.authUserId
});
clearInterval(interval);
}
}, 5000)
})();
</script>
<!-- End Google Tag Manager -->
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id={{$google_tag_manager_id}}"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
Main.jsx
const authUser = useSelector(state => state.auth.auth_user);
useEffect(() => {
window.authUserId = authUser?.id;
}, [authUser]);

Insert Google Tag Manager (gtag.js) Tracking Id dynamically for AngularJS

I need to insert Google Tag Manager (gtag.js) dynamically for AngularJS. I manage a multi-tenant site where the Tracking Id is unique per tenant.
We did this previously (the old way using Google Analytics - analytics.js) like this:
index.html -
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
</script>
app.controller.js -
function setupAnalytics() {
var googleTagEnabled = $settings.checkTrue('Analytics/GoogleTagEnabled');
var googleTag = $settings['Analytics/GoogleTag'];
if (googleTagEnabled) {
$window.ga('create', googleTag, 'auto');
$rootScope.$on('$stateChangeSuccess', function (event) {
$window.ga('send', 'pageview', $location.path());
});
}
}
How can this be done using the new gtag method?
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-YY"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXXX-YY');
</script>
Solved it.
Kudos to Luke Boris's answer here:
https://stackoverflow.com/a/66530446/1098620
Combine with Chris Anker's answer here:
https://stackoverflow.com/a/48124899/1098620
index.html
<!-- no code here. -->
app.controller.js
function setupAnalytics() {
var googleTagEnabled = $settings.checkTrue('Analytics/GoogleTagEnabled');
var googleTag = $settings['Analytics/GoogleTag'];
if (googleTagEnabled) {
// Setting dataLayer & gtag to window because I'm using a custom code text field in a tag management system
window.dataLayer = window.dataLayer || [];
window.gtag =
window.gtag ||
function() {
window.dataLayer.push(arguments);
};
window.gtag("js", new Date());
window.gtag("config", googleTag);
// Set initial gtag/js?id=<first ID> script to <head>
var script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = "//www.googletagmanager.com/gtag/js?id=" + googleTag;
document.getElementsByTagName("head")[0].appendChild(script);
$rootScope.$on('$stateChangeSuccess', function (event) {
$window.gtag('config', googleTag, {'page_path': $location.path()});
$window.gtag('event', 'page_view');
});
}
}

Disqus plugin not work in ionic v1

I am using Disqus in my ionic v1 project. The browser is working fine but the problem after build apk is not working show me the error
'we were unable to load Disqus. If you are a moderator please see our Troubleshooting guide'
<script type="text/javascript">
var disqus_shortname = 'shortname';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = 'https://'+disqus_shortname+'.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<div id="disqus_thread"></div>

How do I wait until an element is visible with Protractor when Angular is not available?

I have a login function that I'm using for a Protractor test, it looks like this:
var config = require("../helpers/config.js");
var login = function() {
browser.driver.get(config.dsp.url);
browser.driver.findElement(by.name("userName")).sendKeys(config.dsp.user);
browser.driver.findElement(by.name("password")).sendKeys(config.dsp.password);
return browser.driver.findElement(by.name("submit")).click().then(function() {
return browser.driver.wait(function() {
return browser.driver.isElementPresent(browser.driver.findElement(by.className("sample-class-name")));
}, 360000);
});
}
module.exports = login;
I can't use any of the protractor specific hooks because Angular is not used on this page, so I have to use the underlying webdriver API. The problem is, I can't seem to figure out how to wait until an element is visible using this wrapped webdriver object. Any help would be appreciated.
Try with the expected conditions from the underlying driver:
var config = require("../helpers/config.js");
var until = require('selenium-webdriver').until;
var login = function() {
var driver = browser.driver;
driver.get(config.dsp.url);
driver.findElement(by.name("userName")).sendKeys(config.dsp.user);
driver.findElement(by.name("password")).sendKeys(config.dsp.password);
driver.findElement(by.name("submit")).click();
return driver.wait(until.elementLocated(by.css(".sample-class-name")), 10000)
.then(e => driver.wait(until.elementIsVisible(e)), 10000);
}
module.exports = login;

disqus universal code with backbone

I'm working on backbone website that uses disqus as its commenting system, I use backbone boilerplate, and I registered a module for the comment, I included in it the js provided by DISQUS
my module looks like this :
define([
'namespace',
'use!backbone'
], function(namespace, Backbone) {
var Comment = namespace.module();
Comment.Views.CommentView = Backbone.View.extend({
template: "app/tpl/comment/main.html",
render: function(done) {
var view = this;
namespace.fetchTemplate(this.template, function(tmpl) {
view.el.innerHTML = tmpl();
if (_.isFunction(done)) {
done(view.el);
}
});
},
commentScript: function() {
console.log('Comment Script INIT.');
var disqus_identifier = 'a unique identifier for each page where Disqus is present';
var disqus_title = 'a unique title for each page where Disqus is present';
var disqus_url = 'a unique URL for each page where Disqus is present';
var disqus_developer = 1;
var disqus_shortname = 'dandin95'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
}
});
return Comment;
});
my main.html only contain a div with id 'disqus_thread' that used view the comment box
My issue is : when rendering my view nothing done and chrome console shows
Uncaught TypeError: Cannot call method 'toLowerCase' of null embed.js:65
when adding this script to the template every thing working well.
Any advice ????
Basically, it looks like you are creating a backbone view to initialize and render the DISQUS widget within the #disqus_thread DIV and then re-render based on the state of the page:
define('disqus', [], function(){
var disqus_shortname = DISQUS_SHORTNAME,
disqus_identifer = INDEX_IDENT,
disqus_title = DISCOVERY_TITLE,
disqus_url = URL_HERE,
disqus_developer = '1'; // could be deprecated?
var DisqusView = Backbone.View.extend({
el: '#disqus_thread',
initialize: function() {
// DISQUS universal code:
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
},
render: function(options) {
DISQUS.reset({
options: options,
reload: true,
config: function(){
this.page.identifer = options.identifer;
this.page.title = options.title;
}
});
}
});
var disqusView = new DisqusView();
return disqusView;
});
OK! so lets make the assumption that the #disqus_thread element already exists on the page (hence setting el). When the module is loaded, DISQUS will do the initialization.
Say an event is fired off that requires the loading of a new Disqus thread:
$('.article_title').on('click', function(e) {
var $post = $(e.target).attr('id');
disqus.render({
identifier: $post, // OR however you decide to determine these attributes
title: $post
});
});
The iFrame within the #disqus_thread element will then be reloaded to the proper thread. This is a very thinly layered example, but imagine calling disqus.render({...}) within an events hash or router.
DISQUS Ajax Reset Snippet

Resources