Jump to content

Anyone using Revive with React app?


sunech

Recommended Posts

Is anyone using Revive with a single page application based on React? or aware of whether or not it will work out of the box?

Would like to be able to use Revives single page call and ad zones initiated from different React component, but not sure how to implement it - and nothing appears to come up when searching for the Revive / React combination.

Link to comment
Share on other sites

Over the weekend my progress so far, is that I ruled out getting the spcjs to work - and moved on to the asyncjs implementation.
Here I can display banners correctly, but I am having problems getting them to reload on page changes, despite the React component being re-rendered.

Upon url change I am calling window.reviveAsync.REVIVEID.refresh(), but unfortunately the banner does not refresh. When I run it manually in the console it just returns undefined.
I also tried calling reviveAsync.REVIVEID.apply(reviveAsync.REVIVEID.detect()), that I found in another thread, but it also just returns undefined.

When exploring window.reviveAsync.REVIVEID in the console, it does have refresh/apply/detect properties though, so it seems weird that they are returning undefined?

I I only call window.reviveAsync.REVIVEID.apply() it does not return undefined, but instead the error below: 
asyncjs.php?ts=1645982770238:1 Uncaught TypeError: Cannot read properties of undefined (reading 'zones')
    at Object.apply (asyncjs.php?ts=1645982770238:1:1712)
    at <anonymous>:1:53

Anyone have any input on what I might be doing wrong, or how they implemented Revive with React?

Link to comment
Share on other sites

  • 2 years later...

Hello from 2.5 years later. 🙂

I'm trying to do this too! `apply` definitely cannot be called without an argument - that's why you were seeing that TypeError. And `refresh` is just calling `apply(reviveAsync.REVIVEID.detect())` itself. I have noticed that refresh can be successfully called via useEffect:

  const reviveAsync = (window as any).reviveAsync;

  useEffect(() => {
    if (!reviveAsync) {
      return;
    }

    console.log("refreshing ads");
    reviveAsync[REVIVE_ID].refresh();
  }, [reviveAsync]);

 

This is clearly doing "something" because when I go back and inspect the <ins> element, it has new properties and children, but just a "beacon" instead of the ad as I was expecting. However, we have had success using the iframe, at least.

Related, it seems that the asyncjs is not working for us _at all_ - I tried adding the <ins> tag to our root HTML doc, and got the same behavior of "the asyncjs finds the element, mutates it, but doesn't add an ad".

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...