How do I install banner ad code on a Squarespace site?
There are many ways to insert a banner ad code into your Squarespace based site. But first of all, make sure to add your site before proceeding with this tutorial.
There is a number of size of banner ad that you can choose:
- 300×250 – 1st Most Popular
- 728×90 – 2nd Most Popular
- 300×600 – 3rd Most Popular
- 468×60 – 4th Most Popular
- 120×600 – 5th Most Popular
- 160×600 – 6th Most Popular
1. First, you need to create an ad code. In the publisher dashboard, select ADS CODES and choose the CREATE button. Enter the information that is required to create a banner ad code. Then, click the CREATE AD CODE button.
- Ad Code Name – any name (will not be shown to the targeted user)
- Ad Code Type – choose CPC/CPM/CPA
- Targeting Site – choose your added site
- AdBlock Type – choose Banner Only
- Select AdBlock – for this tutorial, we will select 300×250
- Responsive – Yes
- Sticky Ad code – Unchecked
2. After clicking the CREATE AD CODE button, you will be directed to the next page. Copy all the ad code in the AD DISPLAY CODE and paste it into a note or any Wordpad. You can also change the text and background color and border type but make sure to save the setting by clicking the UPDATE AD CODE button. Please copy again the regenerated ad code.
3. Usually, the trending of inserting the banner ad is in-between-content of a post or page. But because Squarespace doesn’t have a method where the Code block can be placed between paragraphs and permanently available for the future new post/page (there’s a workaround, please click here), you have to place the ad code either at the top or the bottom. Sign in to your Squarespace account. On the left column, choose Pages.
4. Then, select Blog.
5. You will see a button shaped like a gear. Please click the button.
6. A new view will appear, please select Advanced located at the bottom of the list in the left column. Next, select Page Header Code Injection.
7. Copy and paste the ad code that you have copied in (2) above into the space provided. To arrange the banner ad in the middle (highly recommended), insert HTML code <center> at the beginning of the ad code and </center> at the end of the ad code. To add top padding, place the HTML code <br> on top of the ad code. One <br> equals to one space. For two or more spaces, add another <br> and so on. To finish it, click SAVE.
8. Once you click SAVE, your blog page will refresh automatically and you’ll see the results at the top of your blog page.
9. You can also place another 300x250px banner at the bottom of the blog page by following the steps below. Squarespace does not allow you to enter the same ad code more than once. So you need to create a second ad code for the banner by repeating step (1) and (2) above.
Note: The reason why we recommend that you include banners at the bottom of your blog page is that Squarespace doesn’t have a method where the Code block can be placed between paragraphs that are permanently available for the future new post/page. But if you want to put an ad code in-between-content as well, we’ve provided a tutorial here.
Repeat step (5) above. A new view will appear, please select Advanced located at the bottom of the list in the left column. Next, select Post Blog Item Code Injection.
10. Copy and paste the ad code that you have copied in (2) above into the space provided. To locate the banner ad in the middle (highly recommended), insert HTML code <center> at the beginning of the ad code and </center> at the end of the ad code. To finish it, click SAVE.
11. Once you click SAVE, your blog page will refresh automatically and you’ll see the results at the bottom of your blog page.
Your first earnings from the banner ad will appear in your IgniterAds statistics 24 hours after you have added the code. This time is needed for our ad to propagate and to gather an audience.