Dynamic Content
This section is for websites whose content loads or changes dynamically.
Changing Pages
When switching between pageviews dynamically, it is important to call
1ezstandalone.refresh()
ezstandalone.refresh() tells us that there is a new pageview and calls for new ad code for the defined placeholders.
If the new page contains a different set of placeholders from the previous page, ezstandalone.define() should be called with the new set of placeholders prior to calling refresh.
1<script>
2 ezstandalone.cmd.push(function() {
3 // define new placeholders and call refresh
4 ezstandalone.define(104, 105, 106);
5 ezstandalone.refresh();
6 });
7</script>
Calling define will overwrite the previous set of placeholders, so make sure to add any placeholders that persist from the previous set.
If placeholders 103 and 104 exist on page for example.com/page1 and the user dynamically changes to page example.com/page2 where placeholders 104 and 105 exist. Placeholder 105 must be included in the define call.
New Content
For additional placeholders within the same pageview, there is the ezstandalone.displayMore function.
If a user scrolls down the page, new content loads, and placeholders 104 and 105 are added, ezstandalone.displayMore should be used to display them.
1<script>
2 ezstandalone.cmd.push(function() {
3 // call new placeholders
4 ezstandalone.displayMore(104, 105);
5 });
6</script>
Changing content
If the content changes within the same pageview and a placeholder is no longer needed or visible, the placeholder needs to be properly cleaned up using ezstandalone.destroyPlaceholders. This allows the placeholder to be loaded again via ezstandalone.displayMore if necessary.
1<script>
2 window.ezstandalone.cmd.push(function() {
3 // destroy placeholders
4 ezstandalone.destroyPlaceholders(104, 105);
5 });
6</script>
Infinite Scroll
For sites which implement an infinite scroll, a combination of calling ezstandalone.destroyPlaceholders followed by ezstandalone.displayMore may be necessary to reuse placeholders if within the same pageview.
in-content placeholders specifically for infinite scroll.
Example
The example below shows the flow of an infinite scroll would look like on a site with multiple articles.
Start off by calling the placeholder for the first article on page load.
1<script>
2 window.ezstandalone = window.ezstandalone || {};
3 ezstandalone.cmd = ezstandalone.cmd || [];
4 ezstandalone.cmd.push(function() {
5 ezstandalone.showAds(102, 103, 104);
6 });
7</script>
User then scrolls to the next article, so the next set of ads are loaded.
1<script>
2 window.ezstandalone.cmd.push(function() {
3 // call new placeholders
4 ezstandalone.displayMore(105, 106);
5 });
6</script>
User then scrolls to the third article, and the placeholders from the first article need to be reused.
1<script>
2 window.ezstandalone.cmd.push(function() {
3 // destroy initial placeholders
4 ezstandalone.destroyPlaceholders(102, 103, 104);
5 // call new placeholders
6 ezstandalone.displayMore(102, 103, 104);
7 });
8</script>
Removing all placeholders
Remove all placeholders on the page by using the destroyAll function
1<script>
2 window.ezstandalone.cmd.push(function() {
3 ezstandalone.destroyAll();
4 });
5</script>