I'm developing a web-based application in which I need to transit a from one HTML page to another after a specified time(say 2 seconds). I'm using Google web designer and pretty much new to this tool, as well as HTML.
You can use Google Web Designer events and custom actions to achieve this.
In the Events panel, click the + button to add an event
Target: page1 or your page id
Event: Ready to present the page
Action: Custom > Add custom action
Configuration:
setTimeout(nextPage, 2000);
function nextPage() {
document.getElementById('pagedeck').goToNextPage();
}
You can do this for every page and reuse this custom action.
Or you can also use goToPage method of pagedeck if you just want it to navigate to certain page using page id.
setTimeout(nextPage, 2000);
function nextPage() {
document.getElementById('pagedeck').goToPage('page1_1');
}
where page1_1 is the page id of the page to go to.
You can see a list of APIs in our help documentation.
https://support.google.com/webdesigner/answer/6279926?hl=en&vid=1-635794172024313590-1514011264
Related
I work on a one single page application (360 virtual visit) with Angular 11. I would like to track user events and especially on buttons.
I started to put the Global site tag in my Index.html file like this: Global Site tag in Index.html
On google analytic, I receive connection data user First Data User
But I have no idea how I can track bouton click with Angular.
Does anyone have an idea that works today ?
do not hesitate to ask me questions for more information. :D
Thank you in advance for your answers. I would share my progress.
For something like Button Clicks, you have to configure custom events in Google Analytics and push that custom event whenever user clicks the button.
You can create onButtonClick() function and call it when user clicks the button. In the function, you should push event to the window.dataLayer:
onButtonClick() {
window.dataLayer.push({
event: 'button_click',
data: {
user: this.current_user._id,
... // Send some custom data that you want to track
}
})
}
You should be careful with SPA when you install gtag the way it is described into docs as it will track page views incorrect. In SPA browser loads the page only once, and all other actions will rerender the content but it still will not be counted as a views.
Instead you will need to set up router events. Here is a great tutorial for that. It also will explain how to set up other events like button clicks.
By the way in the example above they suggest to send user id with event. Instead of it you may send it with config only once, and it will be automatically added to any your event:
gtag('config', 'GA-ID', {
page_path: event.urlAfterRedirects,
user_id: this.user.id
});
You need to configure the Google tag manager to send events to Google Analytics. I've written a post about it: https://pieterjandeclippel.medium.com/angular-or-react-or-whatever-and-google-analytics-97342c909e61
Now it seems that Universal analytics will be on its way out, so you might want to try GA4 instead.
But I haven't tried with that one yet, since my own website has been configured to use UA.
We've added the same feature recently and this guide here, albeit a bit dated, explains it quite well.
It boils down to you using a dedicated GoogleAnalyticsService that enables you track specific events (ie. button clicks, scroll events, etc).
I have a SideMenu page fragment in my app. On each and every page, I have a copy of this page fragment.
My intention was to create a SideMenu with openable SubMenus (only one sub menu could be open at a time), but I could not get it done to make the app "remember" the state of the SideMenu( like which SubMenu should be open, and which ones shouldn't), because on each site there is a different widget, so when in my code ( in my onClick events) I refer to the widget, I am not handling "a global SideMenu" but rather a specific copy of it, unique to that page.
Sadly, this took several hours of debugging to realize, I am defeated.
Is there anyway to place a page fragment on a page, so I can handle that widget on its own, not just it's copies?
Thanks in advance, I can try to specify more the question if it's needed.
I agree with #MarkusMalessa. You need to invoke the widget on every page and then apply whatever change on it. I am doing the samething on a project in which I intend to shrink and expand the sideMenu. To give you an idea, evertime I click a button on the side menu responsible for the logic, this is the code that's invoked:
var pages = app.pages._values;
pages.forEach(function(page){
var sideMenu = page.descendants.sideMenu1;
if(sideMenu){
if(widget.text === "chevron_right"){
sideMenu.getElement().style.width = "300px";
} else {
sideMenu.getElement().style.width = "60px";
}
}
});
That way every sideMenu widget inside each page that has it receive the same changes.
I have a website with "add to homescreen" enabled - i.e. I have got a manifest.json file with "display": "standalone".
The problem I'm having is when I open the website via the homescreen shortcut, it will resume from when I last accessed it. I have to pull to refresh to make it fetch the latest content.
My question is, is it possible to make it do a refresh every time it is accessed?
If you'd like to take specific action inside of your web app whenever it moves from the "background" to the "foreground" again, you could listen for the appropriate events using the Page Lifecycle API.
The most straightforward way of doing this would probably be to listen for visibilitychange events, and programmatically refresh your data source when you detect that the current visibilityState has transitioned to 'visible'.
This could look like:
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
// Your refresh logic goes here.
}
});
I am building an HTML5 single-page web app that employs the concept of "views" or "screens"; essentially just different DOM elements rendered to be visible at any given time. As the user navigates between "views", I'm really just hiding/enabling DOM elements.
I'd like to be able to make use of the browser's history functionality, including the back/forward buttons, but I'm not sure how that plays into the concepts of history.pushState and window.onpopstate.
Ideally, I'd like to register "click handlers" with the browser's back/forward history buttons (obviously in a cross-browser-compatible way) so that when the user clicks either button, it engages my own custom Historian object (in JavaScript) that figures out which "view" to render for the user.
How can I do this?
Firstly, you need some sort of routing solution. You can use Crossroads to register and manage your routes. Each route should have a handler, which enables the appropriate div in your single page.
var route1 = crossroads.addRoute('/page1/', function(id){
//enable div for page1 route
});
Then, you can use Hasher to manage browser history.
Another way is to rebuild your application with Durandal, which has a router and manages browser history out of the box.
I am trying to write a JavaScript function that will open my extension like when the extension icon is clicked. I know how to open my extension in a new tab:
var url = "chrome-extension://kelodmiboakdjlbcdfoceeiafckgojel/login.html";
window.open(url);
But I want to open a pop-up in the upper right corner of the browser, like when the extension icon is clicked.
The Chromium dev team has explicitly said they will not enable this functionality. See Feature request: open extension popup bubble programmatically :
The philosophy for browser and page action popups is that they must be triggered by user action. Our suggestion is to use the new html notifications feature...
Desktop notifications can be used progammatically to present the user with a small HTML page much like your popup. It's not a perfect substitution, but it might provide the type of functionality you need.
Chrome team did create a method to open the popup programmatically, but it's only enabled as a private API, and plans to make it generally available have stalled due to security concerns.
So, as of March 2018 as of now, you still can't do it.
Short answer is that you cannot open browserAction programmatically. But you can create a dialog with your content script which emulates your browserAction and display that isntead (programmatically). However you won't be able to access your extension's background page from this popup directly as you can from your popup.html. You will have to pass message instead to your extension.
As mentioned there is no public API for this.
One workaround I have come up with is launching the extension as an iframe inside a content script with a button click. Whereby the background script emits the extension URL to the content script to be set as the iframe's src, something like below.
background.js
browser.runtime.onMessage.addListener((request) => {
if (request.open) {
return new Promise(resolve => {
chrome.browserAction.getPopup({}, (popup) => {
return resolve(popup)
})
})
}
})
content-scipt.js
const i = document.createElement('iframe')
const b = document.createElement('button')
const p = document.getElementById('some-id')
b.innerHTML = 'Open'
b.addEventListener('click', (evt) => {
evt.preventDefault()
chrome.runtime.sendMessage({ open: true }, (response) => {
i.src = response
p.appendChild(i)
})
})
p.appendChild(b)
This opens the extension in the DOM of the page the script is running on. You will also need to add the below to the manifest.
manifest.json
....
"web_accessible_resources": [
"popup.html"
]
....
You could emulate the popup by displaying a fixed html element on the page in the same location the popup would be and style it to look like the popup.
I had the same requirement: When the user clicks on the extension icon a small popup should open. In my case, I was writing an extension which will give updates on selective stocks whenever the icon is clicked. This is how my popup looked.
If you were having the same requirement then please read the answer below.
This is how my manifest.json file looked.
All the heavy lifting was handled by manifest.json file only. There is a section browser_action inside which there is a key called default_popup, just put the name of the HTML file that you want the popup to display.
I wanted my extension to work on all the pages that's why I added the attribute matches under content_scripts. I really didn't need to put the jquery file jquery-3.2.1.js inside the js array but the extension manager was not allowing me to keep that array empty.
Hope this helps, do comment if you have any doubt regarding the answer.