Hi,
Thanks for your reply. I think adding the AdPlugg.refresh(); function will solve our problem now.
May I know when this can be implemented? :)
Q&A
Hi,
We are trying to use AdPlugg in our web app that is a SPA (Single Page Application), i.e. web apps that load a single HTML page and dynamically update that page as the user interacts with the app by rewriting the current page (DOM elements) rather than loading entire new pages from the server.
We added the AdPlugg <script> snippet in the HEAD section of the layout template that controls the overall layout of the SPA and common across all pages. We then insert the AdPlugg <div> tag at the relevant page templates based on our Ad Zones. Since SPA updates the web page DOM elements dynamically when the user clicks on the page links, thus we find that AdPlugg is not able to functional normally. What it means is AdPlugg <div> tag is not found in the web page initially when the AdPlugg <script> snippet is executed, and when the user clicks on the link of page with AdPlugg <div> tag, the page DOM elements (including the AdPlugg <div> tag) are written dynamically to the current page, but AdPlugg <script> snippet won't detect this and display our ads accordingly.
Our questions:
1. Is there a AdPlugg Javascript API where we can trigger AdPlugg to scan the entire DOM elements of the current page for AdPlugg <div> tag and display our ads?
2. As our user click on the page links and navigates between the pages, the new pages are not loaded from the server although the location URL changes. Thus, the API used in #1 will also need to re-read the current location URL to display the relevant ads.
So far, we managed to make some progress:
(i) We discovered the javascript function AdPlugg.run() that enables us to achieve #1, but we are still struggling in achieving #2.
(ii) Due to this, our ads only shown correctly in the first page that we open via typing manually in the browser location bar.
(iii) When we click on the page links to navigate between pages, the ads that is targetted for the first page is shown regardless of the current location URL.
(iv) Our assumption is that AdPlugg <script> snippet "remembers" the location URL when the first page is loaded, i.e. when the AdPlugg <script> is first loaded and executed.
(v) As we click on the page links, AdPlugg is not aware that our page URL has changed and it needs to re-read the current location URL. (Since the AdPlugg <script> snippet does not get reloaded when the user navigates between pages in our SPA.)
We are stuck now. Appreciate some guidance to help us moving forward. Thanks in advanced.
Hi,
You are right, AdPlugg.run(); will rescan the page for new ad tags and fill any that are found.
Depending on your situation, you may also find this one useful: (AdPlugg=window.AdPlugg||[]).push({'command':'run'}); This does the same same thing as AdPlugg.run(); but handles async loading better (it queues up the command and would work even if the AdPlugg JavaScript SDK hasn't loaded yet).
Another one that you might like is AdPlugg.watch(); This will tell the AdPlugg SDK to watch your pages for changes and fill any new ad tags that appear. Note: that you can also call this using push as in the example above.
Unfortunately, we don't have much for documentation regarding these more advanced feaures yet. Hopefully we'll have complete documentation available soon.
You are exactly right about the scanning of the url, we only do it when the AdPlugg SDK first loads. We will fix this as it doesn't look like there is currently any way to handle your situation.
What do you think about adding an AdPlugg.refresh(); function? We could make it so that when it is called, the SDK would rescan everything.
