If you are having issues getting gates to work that you have injected onto your webpage dynamically after page load, this short article will help you solve common issues. This is a common scenario when working with React, Vue.js, Angular, A/B testing platforms, or in fact any code that dynamically modifies a webpage after it has already finished loading.
Because the GatedContent.com installation script only 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.
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. Make sure you run the function after all relevant DOM updates have finished being made.
An extra note on modal gate links
If your code is attempting to add a new gate as a modal link by changing the HREF attribute of a link that already opens a gate, then you will need to remove the ="" custom data attribute from these links before executing gcdc("loadsGates"); . This attribute is added by the GCDC script whenever it processes a modal gate link to prevent it from modifying that link again, as a way of improving performance. Removing it effectively resets the links and will allow it to point to a new, different gate.
Got a question about creating gates or having issues? Fear not, GatedContent.com is on hand, simply click "+ New Support Ticket" above.