I am working on a website build with NextJS. I have added the Pixel
to my website, but the pixel is not working correctly. I have added the below code
to my _app.tsx also tried placing the code in [[...pages ]]
<Script
id="fb-pixel"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '602606363244718');
fbq('track', 'PageView');
`,
}}
/>
I have also tried with
useEffect(() => {
import('react-facebook-pixel')
.then((x) => x.default)
.then((ReactPixel) => {
ReactPixel.init('XXXXXXXXXXXXXXXXXXXXX') // facebookPixelId
ReactPixel.pageView()
router.events.on('routeChangeComplete', () => {
ReactPixel.pageView()
})
})
}, [router.events])
I have added Google Analytics and Messanger Chat plugins those are working fine, only the Facebook Pixel is not working.
But, sometimes the pixel activates, and sometimes not. Can
Does anybody help me with that?
Related
I was trying to migrate my nextjs application to app directory, but I found a weird behaviour.
When I have a route in the pages folder like this:
// `pages/test/[slug]/index.tsx`
export default function Page() {
useEffect(() => {
console.log('mount')
return () => {
console.log('unmount')
}
}, [])
return <>
<Link href="/test/1">1</Link>
<Link href="/test/2">2</Link>
</>
}
if I change the page by clicking one of the links, the slug changes, but component doesn't remount. However, when I move this file to app/test/[slug]/page.tsx and mark the file with 'use client';, clicking the link unmounts page component and then mounts it again.
Is this expected behaviour? If so how can I achieve behaviour from pages directory in app?
I got a strange behavior from Google Identity Service signin button while implementing it with react. When I first visit the signin page the Google signin button do not appear but one tap window appear. If I refresh the page then both appears. After that if I navigate to other page and come back to signin page button disappear again but one tap window appear.
page first loading
page after browser refresh
I used the following code for signin button
renderGoogleSignInButton = () => {
return (
<>
<div
id="g_id_onload"
data-client_id="MY_CLIENT_ID"
data-auto_prompt="false"
data-auto_select="true"
data-callback="handleCredentialResponse"
></div>
<div
className="g_id_signin mt-4 flex justify-center"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left"
></div>
</>
)
}
and following code for one tap window
componentDidMount() {
google.accounts.id.initialize({
client_id: MY_CLIENT_ID,
callback: this.handleCredentialResponse,
})
google.accounts.id.prompt()
}
I didn't find any clue using google search, not even in the docs.
Thanks in advance for your help.
For those who will have this problem in future with react.
constructor(props) {
super(props)
window.handleCredentialResponse = this.handleCredentialResponse
this.myRef = React.createRef()
}
componentDidMount() {
if (window.google) {
window.google.accounts.id.initialize({
client_id:MY_CLIENT_ID
callback: this.handleCredentialResponse,
})
window.google.accounts.id.prompt()
window.google.accounts.id.renderButton(this.myRef.current, {
theme: 'outline',
size: 'large',
})
}
}
......
}
It sounds like the One Tap prompt is being displayed as expected, but it was a little unclear. If you're having issues with One Tap, Check out the PromptMomentNotification and getNotDisplayedReason values, they should help you to understand the reason why the One Tap prompt may not be displayed. You might also consider One Tap in an iframe if there's an issue with React being hard to debug.
For the button, if you've not found anything suspicious with pre-rendering, caching or when the div tag containing g_id_signin is loaded you might try rendering the button browser side using JS and renderButton.
I had the same issue - login button would not appear without a refresh. For me, it was simply a matter of moving the below logic from App.tsx to Login.tsx.
useEffect(() => {
dispatch(setCurrentPage("login"));
google.accounts.id.initialize({
client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID!,
callback: handleCallbackResponse
});
// eslint-disable-next-line #typescript-eslint/no-non-null-assertion
const googleLoginDiv: HTMLElement = document.getElementById("googleLoginDiv")!;
google.accounts.id.renderButton(googleLoginDiv, {
type: "standard",
theme: "outline",
size: "large"
});
}, []);
So at the moment, I have a site I'm creating with Next Js on the front-end with contentful used as my CMS.
I have quite a few pages that use the contentful function to fetch the data:
export async function getStaticProps() {
const client = createClient({
space: process.env.NEXT_CONTENTFUL_SPACE_ID,
accessToken: process.env.NEXT_CONTENTFUL_ACCESS_TOKEN,
});
const res = await client.getEntries({ content_type: "MYCONTENT" });
return {
props: {
MYCONTENT: res.items,
},
};
}
So imagine this code on about 30 pages. I then filter and map through the items that I need using this code:
{MYCONTNET
.filter((e) => e.fields.tag === "design tools")
.map((content) => {
return (
<ToolsCard
key={content.fields.title}
title={content.fields.title}
para={content.fields.tagline}
url={content.fields.url}
img={content.fields.img.fields.file.url}
/>
);
})}
It was going well until I recently came across an issue whereby not all the items get passed to the front end.
My only solution is to republish the content on contentful but when I do it seems to have an effect on the other pages. Even when I tried to console log I cant see the data being passed.
It shows me this image and here is a more detailed image
I'm not sure what the issue is, it was working fine, but when I started adding more content this issue came up.
If anyone can help, that would be great. Thanks in advance.
Answer:
So I didn't realise, I needed to increase the limit parameter. I had over 113 but the default was 100.
I am writing e2e Testcases on Cypress for webshop, we have integrated PayPal and I am unable to click on the PayPal button with in the iframe.
I always get an error in finding the element in iframe.
someone have an idea how can I do that?
code
cy.get('iframe')
.getframe3D()
.find('paypal-button-number-0')
Command
Cypress.Commands.add('getframe3D', { prevSubject: 'element' }, $iframe => {
return new Cypress.Promise(resolve => {
$iframe.ready(function() {
resolve($iframe.contents().find('body'));
});
});
});
Interacting with iframe is quite tricky in Cypress however it's possible. Your custom command looks correct and it worked for me as well. However, you can also try below way and check if it is working for you.
Here provide CSS selector for the iframe as an argument getIframeBody() function.
cy.getIframeBody('iframe').find('paypal-button-number-0').click()
Custom Commands
Cypress.Commands.add('getIframeBody', (iframe) => {
return cy.get(iframe).then($iframe => {
const $body = $iframe.contents().find('body')
cy.wrap($body)
})
})
For more info you can follow the cypress blog to interact with iFrame
Your custom command to get the iframe body is fine, you just have the wrong selector for the button.
Since it's a class, you need a . prefix
cy.get('iframe')
.getframe3D()
.find('.paypal-button-number-0')
I'm trying to pull photos from a facebook page and place them on a my gatsby website, but I'm having trouble integrating Facebook SDK so I can use Graph API to grab the data I need. I've tried just getting the url of the photos and used them in img tags, but the photos disappear as I refresh the page.
I used axios to get the data
getFacebookAPI = () => {
let imgArray = []
axios.get('https://graph.facebook.com/v2.7/me?fields=id,albums{photos{images}}&access_token=exampletoken')
.then(response => {
console.log(response)
console.log(response.data.albums.data[0].photos.data)
response.data.albums.data[0].photos.data.map(info =>
imgArray.push(info.images[0].source)
)
})
return imgArray.map(info => <img src={info} alt="facebook" />)
}