I'm trying to start from examples from the <amp-analytics> tag, but event by copy/pasting the github example (https://github.com/ampproject/amphtml/blob/master/examples/analytics.amp.html), I can't get any analytics hit to be sent, it just fails silently.
The validator doesn't support it yet (https://github.com/ampproject/amphtml/issues/1087), therefore validation errors seem to be
normal:
Powered by AMP ⚡ HTML – Version 1450396666888
http://localhost:3000/page.html#development=1:22:0 DISALLOWED_TAG amp-analytics
However, the example should work. Am I missing something somewhere ?
Before a few days ago, this component was still expermiental and you had to run : AMP.toggleExperiment('amp-analytics') from the browser's javascript console. The component seems not to be experimental since a few days now so it should work as expected :
Add the amp-analytics library : <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Add the amp-analytics tag :
<amp-analytics type="googleanalytics" id="analytics2">
<script type="application/json">
{
"vars": {
"account": "UA-39250300-2"
},
"triggers": {
"default pageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Normaly, you should see the hit being fired.
The feature is not fully implemented yet. Follow https://github.com/ampproject/amphtml/issues/871 on github for updates.
Related
I followed Pinterest steps to implement Pinterest tag on my Next.js website.
This is a no code implementation, I have Google Tag successfully installed on my website and I can see the events fired on the tag assistant.
However, the Pinterest tag isn't fired and I can't seem to find any exemple of React app with a Pinterest tag.
Because the previous method didn't work, I then tried the manual implementation but I don't think this this is the right code.
Manual implementation in _document.js :
<script
dangerouslySetInnerHTML={{ __html:`
!function(e){if(!window.pintrk){window.pintrk = function () {
window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
n=window.pintrk;n.queue=[],n.version="3.0";var
t=document.createElement("script");t.async=!0,t.src=e;var
r=document.getElementsByTagName("script")[0];
r.parentNode.insertBefore(t,r)}}("https://s.pinimg.com/ct/core.js");
pintrk('load', '<PINT_CODE>', {em: '<user_email_address>'});
pintrk('page');
` }}
/>
This is the solution I found:
<script
dangerouslySetInnerHTML={{ __html:`
!function(e){if(!window.pintrk){window.pintrk = function () {
window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
n=window.pintrk;n.queue=[],n.version="3.0";var
t=document.createElement("script");t.async=!0,t.src=e;var
r=document.getElementsByTagName("script")[0];
r.parentNode.insertBefore(t,r)}}("https://s.pinimg.com/ct/core.js");
pintrk('load', 'YOUR_CODE', {em: '<user_email_address>'});
pintrk('page');
` }}
/>
From the docusaurus docs, the navbar items can only have certain types like link, dropdown and search.
How do I add custom buttons like if I want to add login button ?
This would really depend on the type of functionality you're wanting to see out of the item you add to the navbar, but the development patterns should be similar across various implementations.
If you're trying to trigger something like a login modal when the user clicks your custom button, you could specify the following in docusaurus.config.js:
module.exports = {
themeConfig: {
navbar: {
items: [
{
href: '#login',
label: 'Login'
}
]
}
},
scripts: [
'https://yourdomain.com/customscript.js'
]
};
Then in a script, customscript.js, you could include the following:
document.querySelector('[href="#login"]')
.addEventListener('click', () => {
console.log('Login button clicked.');
});
Docusaurus requires that either href or to is given on each navbar item, so that's why I chose the weird selector, but if you wished, you could also specify className on the item, and then use that as a selector too. If you want the item to be something other than a link, you could set the outerHTML in your custom script or use replaceWith().
Keep in-mind that depending on the way your site's routing is configured, you may need to re-apply the logic in your custom script if the link node is re-written to the DOM by React.
As far as I know, there isn't really a perfect way to accomplish this at the moment, but v2 is also still in development, so the plugin exposures are getting better with each release.
The temporary workaround works well
https://github.com/facebook/docusaurus/issues/7227
Just copy-pasted the example code from Sortable's docs.
It works fine on any touchsreen device, but as soon as I view it on Chrome or any other desktop browser it stops working. No error, you just can't drag anymore.
Onsen UI's JS probably overwrites the drag events or something like that but couldn't manage to find the solution.
Per the answer given here: https://github.com/SortableJS/Vue.Draggable/issues/508#issuecomment-488314106
If anybody faces this issue then the following is a workaround for this;
document.body._gestureDetector.dispose()
If you need to enable it again for any reason, use the following
document.body._gestureDetector = new ons.GestureDetector(document.body);
Since my code is using Sortable in a Vue component, I ended up doing this as part of the options to Sortable.create. It seems to work well enough:
onChoose: function(event) {
if(this.$ons) {
document?.body?._gestureDetector?.dispose();
}
},
onStart: function(event) {
if(this.$ons) {
document?.body?._gestureDetector?.dispose();
}
},
onEnd: (event) => {
if(this.$ons) {
document.body._gestureDetector = new this.$ons.GestureDetector(document.body);
}
},
This question already has answers here:
Why is my Google Chrome extension's popup UI laggy on external monitors but not on my laptop's native screen?
(2 answers)
Closed 1 year ago.
The Chrome Extension I am creating has a form on the popup. When Typing into a text area or input, there is a really bad lag (2-3 seconds per keystroke).
The really odd thing is that it only has a really bad lag if the following is true:
Chrome is running on a separate display (I use for example an Apple LED Cinema Display (27-inch)). Oddly everything works perfectly fine on just my regular laptop and everyone in my offices laptop.
The input is on the top half of the popup (like the top half of the screen)
It is running on MacOs
The lag is caused by the background.js script, removing the background portion of manifest.json removes the delay. Does anyone know why this might be happening, and how I could remove the lag without removing my background.js file?
//index.js
/*global chrome*/
import React, {Fragment, Component} from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render(){
return (
<div className="App">
<input style={{marginTop: '400px'}} placeholder="I have a horrible lag"></input>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
// manifest.json
{
"manifest_version": 2,
"name": "extension",
"author": "me",
"version": "1.0.1",
"description": "description",
"browser_action": {
"default_popup": "index.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": ["tabs"],
"web_accessible_resources" : ["*.html"]
}
// background.js
console.log("background.js is running")
I get no error messages. If I replace '400px' to '100px' I get no lag
Thank you in advance
Update:
This bug was created at https://bugs.chromium.org/p/chromium/issues/detail?id=971701
For those who are still struggling with this issue I will repost a deleted answer which I finally found and which perfectly fixes the problem
even though it's a workaround, but since the bug was reported 2 years ago and there is no fix we should learn how to live with it ¯_(ツ)_/¯:
We faced this issue in production for our Chrome Extension at
usebubbles.com and worked around it by forcing the popup to repaint
while opened on a secondary monitor on MacOS.
Simply add the following to the top of a javascript file included from
your popup.html:
/**
* Temporary workaround for secondary monitors on MacOS where redraws don't happen
* #See https://bugs.chromium.org/p/chromium/issues/detail?id=971701
*/
if (
// From testing the following conditions seem to indicate that the popup was opened on a secondary monitor
window.screenLeft < 0 ||
window.screenTop < 0 ||
window.screenLeft > window.screen.width ||
window.screenTop > window.screen.height
) {
chrome.runtime.getPlatformInfo(function (info) {
if (info.os === 'mac') {
const fontFaceSheet = new CSSStyleSheet()
fontFaceSheet.insertRule(`
#keyframes redraw {
0% {
opacity: 1;
}
100% {
opacity: .99;
}
}
`)
fontFaceSheet.insertRule(`
html {
animation: redraw 1s linear infinite;
}
`)
document.adoptedStyleSheets = [
...document.adoptedStyleSheets,
fontFaceSheet,
]
}
})
}
I have to change the theme based on some event. What i understood from sencha docs and kitchen sink is we have to make entries of all the themes under "builds" block of app.json
"builds": {
"classic": {
"toolkit": "classic",
"theme": "theme-classic"
},
"triton": {
"toolkit": "classic",
"theme": "theme-triton"
}
},
Post build, we can reload application as below to get specific theme.
location.search = "/?profile=classic";
location.search = "/?profile=triton";
But its not working as expected. Any hints please.
You are only halfway there. Sencha Cmd will generate different manifests for your themes. Now you now have to chose the corresponding manifest upon application load. Take a look at Dynamic Manifest section from Microloader's docs.
There are times when you may want to select a build profile
client-side. To simplify this, the Microloader defines a hook method
called “Ext.beforeLoad”. If you define this method like the following,
you can control the name or content of “Ext.manifest” prior to the
Microloader processing it while leveraging its platform detection.
For your case it would look something like this:
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
var theme = location.href.match(/profile=([\w-]+)/);
theme = (theme && theme[1]) || 'classic';
Ext.manifest = theme;
};
</script>