How to use AdPlugg in Single Page Application (SPA)

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.

Submitted by bereev on Tue, 2025-06-24 - 8:18

Answers

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.

Submitted by collinkrawll on Wed, 2025-06-25 - 8:18

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? :)

Btw, when the AdPlugg <script> snippet is executed, does it call AdPlugg.watch(); by default?

We noticed our ads won't appear in any <div> pop ups (with AdPlugg <div> tag) that is created dynamically on user interaction. We were thinking to call AdPlugg.run(); after the pop ups is created. Does it mean that if we call AdPlugg.watch(); when the page is loaded, we will not have to worry about call AdPlugg.run(); later on dynamic pop ups with AdPlugg <div> tag? When is the right time or appropriate scenario to call AdPlugg.watch()?

Thanks again for your help!

Right now AdPlugg.run() fires as soon as the SDK is loaded and then then again during the document ready event (after the DOM and all parts of the page have finished loading). If you modify the DOM after that, you will need to either turn on AdPlugg.watch() or you can call AdPlugg.run() each time you change the DOM. AdPlugg.watch() is a newer feature that we added for SPAs. It uses JavaScript MutationObservers which is only available on newer browsers. We developed it to be as light weight as possible but calling AdPlugg.run() might be slightly more efficient since it doesn't keep running in the background. Try them out and see which you prefer. We can probably get the AdPlugg.refresh() button in by the end of the week.

Cool. Can't wait for the AdPlugg.refresh() function. Please notify us as soon as it is published. (It's ok if it's not fully tested yet.)

At the meantime, we are thinking to "hard-code" the ads placement as a workaround. For instance, we will insert the code snippet as follow where the AdPlugg API typically added for our image ads:

--------------------
<div data-adplugg-zone="add_item" data-adplugg-regid="0" data-adplugg-processed="true" class="adplugg-tag">
<div id="adplugg-placement-x-yyyy">
<div id="adplugg-ad-nnnnnnnnnnnn" data-adplugg-ad="nnnnn" class="adplugg-ad adplugg-image-ad">
<div class="adplugg-image-wrapper">
<a href="http://www.adplugg.com/track/click/xxxxxxxxxxxxxxx" target="_blank" rel="nofollow"><img src="http://cdn1.adplugg.io/apusers/serve/xxxxxxxxxxxxxxxx" width="308" height="109"></a>
</div>
</div>
</div>
</div>
--------------------

Our question is, will this function normally? (Assume that we only have 1 static ads per zone / placement, i.e. no ads rotation, etc.) What is the minimum code that is needed to display and track the ads? Can we just added the <a> tag and <img> tag where the image ads is displayed, such as

------
<a href="http://www.adplugg.com/track/click/xxxxxxxxxxxxxxx" target="_blank" rel="nofollow"><img src="http://cdn1.adplugg.io/apusers/serve/xxxxxxxxxxxxxxxx" width="308" height="109"></a>
------

We need a temporary workaround while waiting for your AdPlugg.refresh() function to complete. Thanks!

Ok, AdPlugg.refresh() is now live and available for use.

Great. The AdPlugg.refresh() method works like a charm.

Can you advise us how the Adplugg.watch() method can be used. We tried to call it before run(), and tried it again after run(), but it doesn't seem to work. We have dom elements with Adplugg tags that were added programatically. But they didn't seem to get detected and displayed accordingly.

Can you provide a sample code snippet to illustrate the usage. Thanks.

We set up a jsfiddle for you as an example here: https://jsfiddle.net/adplugg/jLs08wet/

Thanks for the jsfiddle. It helped us to understand a lot.

I notice that the watch() method does not work if you insert the AdPlugg script tag that we got from the "Download The AdPlugg Snippet" page. Upon deeper checking, I found that the difference between our snippet and yours in the jsfiddle is the following line,

---The Snippet From "Download The AdPlugg Snippet"---
js.src = '//www.adplugg.com/apusers/serve/' + ac + '/js/1.1/ad.js'

---The Snippet From Your Jsfiddle---
js.src = '//www.adplugg.com/serve/js/ad.js';

------
I guess we have no problem using the snippet that you showed us in Jsfiddle, but then we will need to add data-adplugg-access-code attribute in all AdPlugg tags within our application.

I would think that the watch() method should work using the default AdPlugg snippet. We prefer that way too. Just wondering if this is a bug?

Try this Jsfiddle forked from yours and you will see it's no longer working, https://jsfiddle.net/0nwf7oxt/2/
But as soon as you uncommented the original js.src, it will work.

Sorry, yeah that's confusing. The URL with your access code in it is our old url and when you use that URL, it loads the same script but kicks off the default "autoload" behavior. The autoload behavior is to watch and fill all tags until the page has fully loaded (until the document ready event fires). At that point, it turns the watch off. This works great for most customers which is why it is the default. So even though you are turning `watch` on, it was likely already on and then is being automatically turned off in the document ready event. The other url (//www.adplugg.com/serve/js/ad.js) doesn't autoload anything or do anything else by default. It requires you to call additional commands in order for anything to happen. Over time we are likely going to move everything over to the new url and include some default commands along with it. So for what you are doing, you should use the new url, this will give you complete control. Sorry for the trouble, I hadn't considered what would happen with manually setting watch while using the old url.

Also, I updated the original fiddle (https://jsfiddle.net/adplugg/jLs08wet/) to call AdPlugg.init() and pass in the accessCode. If you do this, you don't have to set the access code on each tag.

--Duplicated comment removed--

Submitted by bereev on Wed, 2025-06-25 - 8:18

How to use AdPlugg in Single Page Application (SPA)

Answers

Answer This Question!