Static ads
Purple Experience
In this article, you learn how to create a simple static ad in the Purple Experience.
- In default/storefront/assets, create a folder for the images of your ads (e.g. 'ads').
2. Upload some Images to the folder. To do that, press the 'Actions' button.
3. Click on 'Upload files' to upload the image you want to use.
4. Open the earlier created ads.json and add an ad: Click on the '+' button
5. Add an id to your ad (e.g.: test-ad)
6. Add the image path and a target URL the user will be directed to when clicking on the ad. The target can be an external link or an internal link.
7. To add an internal link you may copy the following line and insert it into the target field. Make sure to change the ending into the name of your view (e.g. instead of name_of_view to home)
If you have ads for different devices, continue with the following steps. If not, skip the following steps and continue with step 18.
14. Click on the multi-select button in the ads.json
15. Press on the 'condition' option. This will make a field named 'condition' available.
16. In the condition field, enable the fields 'compareValue' and 'value'.
17. Enter '$context.platform' inside the value field and your desired device in the compareValue field. Example: If it is an ad for web, the compareValue is web.
In the views.json, chose a view (e.g. home) where you want to integrate the ad, press on the '+' button in the content.
20. Change the content type to 'Ad'
21. Insert your ad id from step 12 into the adId field.
Depending on what content block number your ad is, it will appear in that order on your app. E.g.: In this example the content block is #0 so it will be placed at the top right below the app bar.
22. Click on the burger menu.
23. Click on 'Update Dynamic Resources'
24. Name your changes, e.g. 'ads'.
25. Click on 'Merge all files to preview'.
You have successfully added a simple static ad in the Experience HTML of your app, merged the changes and updated the dynamic resources. You can test the result in the preview and push them live if they look fine, to make them visible in your live app.