If you are having issues getting gates to work inside your Angular or React app this short article will help you solve common issues. 

Some JavaScript frameworks such as Angular, React and Vue manipulate parts of the browser document object model (DOM) after pages have finished loading. Because the GatedContent.com installation script looks for gates on the page as it first loads, any gates subsequently added to the page by one of these frameworks will not be found and processed.

In order to get around this, you should modify your application's code to call the following line of JavaScript whenever you render a new modal or inline gate to the page:


Because this code will throw an error if the GatedContent.com scripts have not finished loading, you may want to wrap it in a standard JavaScript try/catch statement. The GatedContent.com installation scripts will always run this function once as they first load. It is safe to call this function multiple times, and doing so will not duplicate gates, however you should avoid doing this within a setInterval loop for performance reasons.

Exactly how and where you implement this within your code will depend on your application. Instructions for detecting DOM or model changes and reacting to these within each framework should be detailed in the framework's own documentation.

Got a question about creating gates or having issues? Fear not, GatedContent.com is on hand, simply click "+ New Support Ticket" above.