So like the title says, I'm using Google Tag Manager to send events to Facebook. Most events seem fine any only fire once, except the view page event. The event is setup to trigger using GTM's history trigger because we're using React for our site.
Originally it was setup to fire on all history changes, but I notice when using preview mode in GTM that there were two history changes being fired.
1: gtm.historyChange
2: gtm.history change-v2
So, I updated the trigger to only fire on some changes and set: Event equals gtm.historyChange With this change I now only see one history change in GTM preview mode, but I still see two in the fb pixel helper chrome extension. One Page event has the an event ID and params I want to see, the other has nothing.
I'm no analytics or pixel expert so even pointing to a possible reason why this is happening would be really helpful.
I believe that the Facebook pixel already considers history change as a page view, so you are double counting it by also triggering it on the history change. Just load it on page view only and it should resolve the issue.
Related
So I'm working with Calendly iframe and I'm having an unexpected problem, I searched the docs so much and couldn't find a solution.
So Calendly offers a decent iframe with some event listeners for specific use-cases.
I have a single use scheduling url that the iframe receives, when the event is scheduled I fetch a reschedule-url and provide the iframe with it.
The problem is, the event listener for schedule an event is not the same as for update event, and a listener isn't provided for such event... which is so weird for me.
I have no indication when a user updates an event, I can't refresh information from my back-end and display the user with new data.
I guess I'm not the first one with that kind of problem.
Any suggestions?
I made a page with the same url all the time. I show my div by hiding and showing components, but no route. So, now I need the user can go back page using the back arrow of the explorer. Is there any possibility?
The back button of the browser change the window history :
https://developer.mozilla.org/fr/docs/Web/API/Window/history
So i don't think you can link the browser back btn to a javascript variable and prevent his effect on history
You can find on the net solution where people force history.forward() when back btn is pressed, you can change your variable here. But it's a bit dirty
How can I stop the browser back button using JavaScript?
So I have a really ask but the implementation is eluding me.
I want to simulate the completion of a task in the background in our product demo.
The User Journey :
Arrive at the home page
Click button on the home page -> Button goes into loading state (button replaced by loading animation)
We continue on with the demo and navigate away
We want to come back to the home page after "execution complete" .
Well how do we know if execution is complete ? Well that's where this delayed alert I'm trying to implement comes in. I'd like an alert to be sent out , regardless of what page I am on in the app after some x minutes/seconds of clicking that button.
Any ideas on how I would go about doing this ?
I am trying with redux-toolkit but so far it's only working on the page itself and
if I return to the page after navigating away.
This can be done in two ways,
elevate the state to the point which covers both home page and all the navigation pages, Use react context API to pass data and use useEffect hook to track task completion and do the need full.
Use native javascript to trigger custom event and add an event listner to it Read more about curtom events here
Although this is all just theory, I can help more after viewing the code.
would anybody here know if it's possible to do something like what happens in this screen recording? https://www.dropbox.com/s/snhhbeq8knk5dyc/modal-window-routing.mp4?dl=0
It's about routing a modal window, while keeping the UI underneath intact. Normally I'd say that to achieve this in React router the URL would need to encode both what's behind, and the modal. Maybe with some nesting scheme (e.g. /mainview/settings/general). But Outlook web manages to do so while not reflecting in the URL the view that was present when the modal was fired.
Note in the recording how the URL for the settings modal is the same, regardless of whether you open it from the Drafts or the Sent Items or wherever. However, the view from which you opened is kept rendered, and it's where you go back to when you close the modal.
according to the react-router-dom documentation, the following link lays out the proper way to go about achieving your desired result https://reactrouter.com/web/example/modal-gallery
I don't need any routing, location or window.history change, just prevent default and insert my own function instead.
It's also important that the back button will be clickable when the app starts.
It seems so simple but somehow i can't write/find a simple solution...