Get Paid to Search Adobe Stock! ¹

You know, I’ve run the numbers and now’s the time to put Stock search on the site. Kitty needs to make bank.

¹ [Ed. note] Get paid when others search Adobe Stock on your website! ²
² [Ed. note] Get paid when others search Adobe Stock on your website and sign up for a subscription.


Click-bait title aside, the essence is true. You can earn commissions from hosting Adobe Stock search and banners on your website that lead to conversions. In this post, I’ll walk you through the complete process, and at the end, you’ll be able to include Stock search results on your pages for fun and profit.

You start by joining the Adobe Affiliate Program (it’s free), verifying your website, and adding information so you can get paid. This first part of the process can be completed within a few minutes. Behind the scenes, registration and tracking is handled by Tradedoubler, while the program is jointly managed by Adobe and Arvato, a division of Bertelsmann. (Pro tip: If you use an ad blocker, you may need to whitelist the tradedoubler.com domain, otherwise you may have issues navigating your affiliate console.)

Next, you will receive an email from the Adobe Affiliate Team letting you know that your application is being reviewed. If all goes well, after a day or less you should receive another email saying your application was accepted.

Congratulations! You have been accepted to the Adobe Affiliate Program. You can now start creating links and earning commissions on sales.

Full disclosure: When I went through this process, the old website I use in this article was not originally accepted because it did not have content that pertained to Adobe or Stock. The Affiliate Team inspects your website to make sure it meets Adobe standards and is not misusing the program. In the examples below, the Affiliate Team made a personal exception for my site so I could use it as an example in this blog post. If you have questions about the process or the status of your application, please contact the Affiliate Team.

Once you have been accepted, you can start adding banners, links, and other ads on your site to drive referral traffic. This article will focus on the (not too) technical effort of adding an Adobe Stock search “widget” to your site, powered by the Adobe Stock API.


I built my old website in the early 2000’s, long before HTML5 and CSS3, and back when using tables was an accepted method for layout. 😲 It’s far too much of a pain to try to refactor the page, so I will use one of the empty table cells to place my search results. For demo purposes, I will be using this page. (Yes, it is just as old as I said it would be.) Currently, there is an Adobe Stock banner which I recently added to each page using the Affiliate program, so I will remove that to make room for the thumbnails.


There is not a ton of room, only 149x860, but it should be enough to at least get one column of images, or two if I shrink them down.

I will first add an ID to that cell to make it easy to reference.

<td rowspan=”3" valign=”top” id=”stock”>&nbsp;</td>

I want my search content to be completely dynamic, with a variable number of results. At a minimum, my integration needs to:

a) call the Stock REST API and parse the results

b) display thumbnails for each result, and,

c) create a link for each image to Adobe Stock containing my affiliate tracking information.

In addition, my implementation will search on Civil War-themed keywords (for obvious reasons). I also want it to look decent, natch.

If I were starting this project from scratch, I would begin by pulling down the Stock SDK for JavaScript. But that does not have any UI elements — it only provides a wrapper for the APIs. So I’d also need to build a display framework for my thumbnails, wrestle with CSS, create some dynamic HTML, etc. …Or I could use a library that already does all that.

As I turns out, I wrote a library for this, quelle surprise! While I would classify it as glorified sample code rather than a full-fledged app, I created it to meet the basic requirements above and be easy to implement. I call it the “Stock SearchBar.” The fact that it actually lacks a search bar is neither here nor there… 😳 (But I do plan to add an interactive search at a later date.)

Currently, the SearchBar works by either using keywords that exist on the page, or by running a visual similarity search based on an image URL. My rationale is that you want the thumbnail search results to be contextual, based on the content of your page. Assuming you have an element that contains the title, it should be easy to use that for keywords. Visual search is a popular option if you already have your own photo site, and want to showcase Adobe Stock results that are similar to the images on your site. In the background, Stock uploads the image by its URL and uses Adobe Sensei to find the closest matches. You can also combine keyword and visual search together.

By request, I added an option to enable search on video assets as well. This will load low-resolution video thumbnails that automatically play/pause when you roll your mouse over them.

Before you get started, take a quick look at my reference demo.


First steps

Begin by going to the GitHub repository and reading the instructions. If your only goal is to get it working on your site, there is no need to pull down the whole repo. Just download the latest searchbar-1.x.zip from the GitHub folder. Here is a link to v1.2. Extract this to the root of your folder or wherever your pages reside. The zip will contain a subfolder named “searchbar,” under which all the required files reside. This zip archive is the same as the dist folder in the same repository. Please see the readme for details on what libraries are included.

Now, add links to the main CSS and JavaScript files on the page(s) where you want the SearchBar to appear. This example assumes that the searchbar folder is in the same folder as your page, otherwise you will need to adjust the path. You may add these links to the <head> or <body> of your page.

<link rel="stylesheet" type="text/css" href="./searchbar/sdk_searchbar_styles.min.css">
<script type="text/javascript" src="./searchbar/sdk_searchbar.min.js"></script>

Next, we will need to add some embed code. Typically, you would add the embed code where you want the SearchBar to be created, however it can be put anywhere on the page after the main JS file. More importantly, edit the contId property in the embed code to point to the container on your page which will hold the SearchBar. If this container does not exist, SearchBar will throw an error and prevent its insertion.

<script type="text/javascript">
StockSearchBar.init({
// container where SearchBar will appear
contId: '#stock',
    /*...*/
</script>

As I mentioned earlier, I’m going to place my SearchBar inside the table cell to which I gave an element ID of “stock.” Therefore, my contId will be '#stock', using its CSS selector.

API keys, Program IDs, and where to find them

To complete the next section, you will need to visit the Adobe Affiliate publisher portal to fetch some information. But before you do that, you also need to register your application on the Adobe I/O Console. It’s quick, I promise! There is a full guide here, but here are the essential steps:

  • Go to the Adobe I/O Developer Console here: https://console.adobe.io. Sign in with your Adobe ID (or create a free ID if you don’t have one).

  • Click the New Integration button.
  • Select the following items, clicking Continue each time: 
    Access an API > Adobe Stock > OAuth integration > New integration

This opens a screen where you will enter your integration details.

Adobe I/O new app integration form
  • Name: The name of your integration. A good practice might be to use your website name.
  • Description: E.g., “Stock SearchBar on MyWebsite.com.”
  • Platform: Choose Web.
  • Default redirect URI: Since the only goal is to get an API key, you can put in whatever you want as long as it is a URL starting with “https” (e.g., https://mysite.com.)
  • Redirect URI pattern: Like above, this field is not technically needed for this type of integration but you still need to fill it in. You may enter the same URL as above, but you must escape periods (.) with double backslashes (\\). 
    Example: https://mysite\\.com

Now save, after affirming you aren’t a robot. You aren’t a robot are you?

Once saved, the I/O Console will generate a few pieces of data. The only information you need from this screen is the API Key (Client ID). You do not need the Client Secret for this workflow. Copy this somewhere for the next step. This whitelists your application on Adobe Stock.

Now let’s get some info from the Adobe Affiliate portal.

  • Sign in with the login you created earlier.
  • Go to Tracking > My ads.
  • Click Text link info.
  • In the pop-up window, copy the URL shown. Extract the p, a and g values from the link and assign them to the embed code as follows:
  programID: {p value},
advertiserID: {a value},
adID: {g value},

And now insert your Stock API key and app name. The app name can be whatever you want, as it is mainly used for troubleshooting. I recommend using your website name, as this will allow us to help you faster.

  apiKey: 'e09a5cb201804cf98142ad6bc3181abb',
appName: 'mostfamousman.com-searchbar/1.0',

At this point, when you reload your page you should see the SearchBar appear. If so, great! If not, this may require some detective work on your part.

Open your web console (in Chrome, Cmd+Option+I [Mac] or Ctrl+Alt+I [Windows]) and look for errors. The most obvious error would be not using a valid ID for your main container, the contId value. In that case, you’ll see Container does not exist. Set "contId" to a valid selector. If you are using an element ID (e.g., id="myDiv"), make sure you put a # in front of the name.

Another mistake would be to try running your page on your desktop without a web server, i.e., double-clicking on your HTML and opening it directly. That won’t work because SearchBar uses Ajax to fetch required scripts, which won’t work unless it is on a web server. If you don’t have a localhost set up (and if you use Node.js, see this great tip for creating a local web server on the fly,) then give your page a temporary name and upload to your website.

In addition, if you just copied the API key in my samples here, it won’t work for you because that is a bogus value. Go back and follow the instructions to get your own key! If it’s still not working for you, leave me a comment and I can help you investigate offline.

In this intermediate state, my gallery page now looks like this, and below is the current state of my embed code. That’s nice, but images of sushi and coffee don’t exactly go with my theme. It’s time to add some search filters!


StockSearchBar.init({
contId: '#stock',
apiKey: 'e09a5cb201804cf98142ad6bc3181abb',
appName: 'mostfamousman.com-searchbar/1.0',
programID: 123456,
advertiserID: 7654321,
adID: 56781234,
});

Finishing up

While the filters block in the embed code is optional, if you leave it out you’ll get random results. SearchBar supports two main search types: by keyword or by visual similarity. These options are designed to scrape text or image URLs from elements in your page.

filters: {
WORDS: ['title', 3],
SIMILAR_URL: '#hero',
},

This process is explained in detail in the readme file, but in the example above, the WORDS parameter will extract the first three keywords it finds in the <title> element of the page. To eliminate common “stop words” (like “a,” “in,” and “and,”) SearchBar uses a clever open source library called Keyword Extractor. Likewise, the SIMILAR_URL parameter above will find the first image URL in the element with an ID of “hero,” such as in the example below.

<div id="hero"><img src="https://as2.ftcdn.net/jpg/00/28/07/29/500_F_28072920_97FvOYIN26RKKmMb455KOW3nZ4n0VDnU.jpg"></div>

Set one or both of these parameters, keeping in mind that choosing a lot of keywords can severely limit the search results. For my demo page, I avoided the image similarity search and instead created an array of keywords related to the American Civil War, which populate a hidden element when the page reloads. However, if my site had been a blog about photography of Civil War monuments and battlefields, then I definitely would have used the visual search instead, as it yields great results.

Since the real estate for my thumbnails is so small, I enabled the tooltips option in the embed code. This creates text rollovers that look a lot better than the native browser tooltips. I also overrode the CSS width to make the SearchBar wider than the 149 pixels; I had to play with this setting a bit so as not to break the table layout.

Lastly, I played with a few other CSS styles to fit two tiny columns of images on the page, increased the number of thumbnails to 24, and limited my search results to images and illustrations. Here are my final filters.

filters: {
WORDS: ['#searchbar-keywords', 2],
FILTERS_COLORS: '',
SIMILAR_URL: '',
THUMBNAIL_SIZE: 150,
LIMIT: 24,
FILTERS_CONTENT_TYPE_PHOTO: 1,
FILTERS_CONTENT_TYPE_ILLUSTRATION: 1,
},

You can see the final result here. Notice that if you hover over any thumbnail in the SearchBar, you will see the tradedoubler URL in the status bar, and if you click on it, it will take you to a landing page on Adobe Stock with your API key in the address bar. This lets you know that tracking is occurring. If you rush back to the Adobe Affiliate portal, then you should see some Impression and Click traffic. Next stop, financial freedom and world domination.


Clearly, I was reloading my page a lot more frequently than clicking on anything.

Whew! Thanks for reading all the way to the end. If you start using my sample code, please post a link in the comments so I can check it out. Or if you have additional ideas to extend it, please let me know.