Please follow these instructions to integrate the Teads format on a Single Page Application (SPA). SPAs may be built with frameworks such as React. These instructions assume your SPA follows a Component-Based Architecture.
Locate the component you wish to insert the Teads format within. Next, paste the following code snippet into the component within a lifecycle hook which is called after the DOM has loaded. For example, if the SPA was built with React, you would paste the following snippet inside of the component within a componentDidMount() function.
(function (d, p) {
var js, s = d.getElementsByTagName('script')[0]; js = d.createElement('script');
js.className = 'teads'; js.async = true; js.type = 'text/javascript';
js.src = '//a.teads.tv/page/'+p+'/tag';
s.parentNode.insertBefore(js, s);
})(window.document, PAGE-ID);Note
Update PAGE-ID with your Page ID.
Next, on the same component. Paste the following snippet into a lifecycle hook which is called when the component is destroyed. This will delete all Teads resources. If the SPA was built with React, you would paste the following snippet into componentWillUnmount().
window.teads.cleanup();
Note
This function will delete all Teads resources on the page. When using this function it is best practice to wrap it in a try/catch.
Lastly, if the component is updated when a user clicks a new link, you will need to add another code snippet to refresh the Teads format whenever the update occurs. This will prevent the user from seeing the same Ad on multiple pages that reuse the component.
Paste the following snippet into a lifecycle hook which is called when the component is updated. If the SPA was built with React and updated with a prop, you would paste this snippet within componentWillReceiveProps().
window.teads.cleanup();
(function (d, p) {
var js, s = d.getElementsByTagName('script')[0]; js = d.createElement('script');
js.className = 'teads'; js.async = true; js.type = 'text/javascript';
js.src = '//a.teads.tv/page/'+p+'/tag';
s.parentNode.insertBefore(js, s);
})(window.document, PAGE-ID);Note
Update PAGE-ID with your Page ID.
Now, you can test your implementation by clicking on several pages. You should see a new Teads format load on every page with the component.
Run into an issue?
Contact your account manager and ask for technical assistance.