Smart Banners website code implementation for marketers

For:
Marketers Marketers Developers
Last update:

At a glance: Add the Smart Banners code to your website to convert your website visitors into mobile app users.

 Note

AppsFlyer Smart Banner web SDK v1 was deprecated on Nov. 8th, 2023. To show Smart Banners on your website you need to upgrade to v2. Learn more

Website code implementation

This article is intended for marketers who want to implement the Smart Banners code on their site via one of:

  • Google Tag Manager (GTM)
  • Adobe Launch Tag Manager
  • Shopify
  • Wix
  • Squarespace
  • WordPress

To add the code to your website via other platforms, or to make changes to the code based on need (including adding parameters, deep linking, hiding the banner, or integrating PBA with Smart Banners), see Smart Banners website code implementation for developers.

To implement the Smart Banners code on your site:

  1. Follow the website workplace instructions to get the Smart Banners code.
  2. Use the platform-specific instructions that follow to implement the code into your website:

Google Tag Manager

To implement the code via Google Tag Manager:

  1. In GTM, create a new tag.
  2. Name the tag, click Tag Configuration, and select Custom HTML.
  3. In the HTML box, paste the Smart Banner code snippet. Replace YOUR-BANNER-KEY in the snippet with your actual banner key.
  4. Click Triggering and create a new trigger by clicking on the plus icon at the top right-hand corner of the screen.
  5. Name the trigger, and then, under Trigger Configuration, and choose Page View.
  6. If you want the banner to show up on all pages, select All Page Views. If you want the banner to show up on selected pages, select Some Page Views and define the condition to trigger the tag. To learn more about triggers, read GTM's documentation.
  7. Click Save at the top right-hand corner.
  8. Return to the tag configuration screen. Verify that all is set and click Save at the top right-hand corner.
  9. Publish your GTM container. 

Adobe Launch Tag Manager

To implement the code via Adobe Launch Tag Manager:

Step 1: Create a property in Adobe Experience Cloud

To create a property (tag) that hosts the Smart Banners code:

  1. Go to Adobe Experience Cloud > Launch.
  2. Under Adobe Experience Cloud Launch, click Go to Launch.
  3. Click New Property.
  4. Name your property.
  5. Under Platform, select Web.
  6. Enter your website domain.
  7. Click Save.

Step 2: Add Smart Banners code to the Adobe Launch property

To add the Smart Banners code to the tag:

  1. On My web property page, select the Rules tab.
  2. Name the rule. Recommended: AppsFlyer Smart Banners.
  3. In the If section, under Events, click +Add.
    • Under Event Type, select Core - DOM Ready.
    • Click Keep Changes.
  4. In the Then section, under Actions, click +Add.
    • Under Action Type > Custom Code.
    • Select JavaScript > Open Editor and paste the Smart Banners SDK snippet without the <script> tags.
    • Click Keep Changes to close the code editor.
  5. Click Save.

Step 3: Add the Adobe Launch tag to your website

To add the Adobe Launch tag to your website (which loads the Smart Banners code):

  1. On the My web property page, select the Environments tab.
  2. Find the row with the environment you want to publish (development or production).
    • Under the Install header, click the box icon on the relevant row; this is usually a production environment.
    • See the section about publishing the Adobe Launch environment.
  3. In the Web Install Instructions dialog box:  
    • Copy the script code snippet.
    • Close the dialog box.
  4. Paste the code snippet into the <head> tag of your website.

Step 4: Publish the Adobe Launch environment

To publish the environment to activate the Adobe Launch tag:

  1. On the My web property page, go to the Publishing tab.
  2. Under the Development section, click Add New Library.
    1. Name the library and choose an environment. 
    2. Under Resource Changes, click Add a Resource.
    3. Click Rules > Load Smart Banners > Latest > Select & Create a New Revision.
    4. Click Save.
  3. Under the Development section:
    1. Next to the newly created library, click the Action menu (3 dots) and select Build for Development.
    2. Click the action menu again and select Submit for Approval.
  4. Under the Submitted section:
    1. Click the action menu and select Build for Staging.
    2. Click the action menu again and select Approve for Publishing.
  5. Under the Approved section click the action menu and select Build & Publish to Production.
    The process is now complete.

Now, when your website loads on mobile, the banner's active creative will be displayed. To only display the banner on certain pages or according to user actions, see Adobe Launch rules.

Shopify

To implement the code in your Shopify website:

  1. In your Shopify dashboard, go to Sales Channels > Online Store > Themes.
    Your current theme displays.
  2. Click Actions > Edit code.
    The Edit code page opens for your theme.
  3. In the Layout folder, click the file that starts with {/} theme.
    The webpage code displays.
  4. In the code, directly under <head>, paste your Smart Banners code. 

Wix

To implement the code in your Wix website:

  1. In your Wix dashboard, click Settings.
  2. In the Advanced section of the Settings page, click Custom code.
  3. Click + Add Custom Code.
  4. In the Paste the code snippet here box, paste the Smart Banners code.
  5. In the Name box, enter a name for your code. Recommended: AppsFlyer Smart Banners.
  6. In Add Code to Pages, select where to display your banners. Either:
    • All pages
    • Choose specific pages
  7. Click Apply.
    The Custom Code page should now show your code. Make sure it is placed in the Head section.

Squarespace

To implement the code in your Squarespace website:

  1. In your Squarespace dashboard, click Website.
  2. Click Settings.
  3. Click Advanced.
  4. Click Code Injection.
  5. In the Header section, paste the Smart Banners code.
  6. Click Save.

WordPress

To implement the code in your WordPress website:

  1. In your WordPress dashboard, click Appearance > Theme Editor.
    The Edit Themes page opens and the CSS code for your website displays.
  2. Under Theme Files, click Theme Header (header.php).
  3. In the code that displays, under <head>, paste the Smart Banners code.
  4. Click Update File.

See also