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>