Install Smart Pages

The Smart Pages code is a separate script that swaps the texts of your Smart Pages. At the end you'll have:

• the Smart Pages code in the head of every page that has a Smart Page
• the message Snippet installed correctly after Check integration
• live Smart Pages that identified companies see on your website

Before you startCopy Anchor Link

• Plan: You can design Smart Pages, preview them, and test them on your website on every plan. You can publish them in the trial, the Growth plan, and Enterprise. White-label customers of a partner don't see the tab.
• Rights: Every user in your account can create, edit, publish, and delete Smart Pages. You don't need admin rights for this.
• Cost: Smart Pages cost no credits.
• Smart Page: You need at least one Smart Page, because Webmetic shows the code only in its editor. The Smart Page's address must belong to a website in your account.
• Screen: You open the editor on a screen at least 1,024 pixels wide. On smaller screens you only see the list of your Smart Pages.
• Access: You need write access to your website's head, meaning the template or the matching setting in your CMS. Otherwise, pass the code on to whoever maintains your website.
• Tracking code: You don't need the tracking code for texts to change. Only the comparison figures in the report require it.

The Smart Pages code identifies the company by itself and works independently of the tracking code, so the two can sit on the same page.

1. Copy the Smart Pages codeCopy Anchor Link

1. Click the Smart Pages tab at the top. Webmetic shows the list of your Smart Pages.
2. Click a Smart Page. The editor opens.
3. At the top of the editor, click Integration. The Install Smart Pages dialog opens.
4. Click the icon with the tooltip Copy snippet. The icon briefly shows a check mark.

In a narrower window the tab shows only its icon, and the name appears when you point at it.

The copied code already contains your account ID and works for all Smart Pages and all websites in your account.

2. Add the code to the headCopy Anchor Link

The code must be in the head of every page that has a Smart Page. So add it to the template that builds the head of all pages.

1. Open the template or layout for the head of your pages.
2. Paste the code as high up in the <head> as possible, before all other scripts.
3. Save the file.

<head>
  <meta charset="utf-8">
  <script src="https://api.webmetic.de/sp/YOUR_ACCOUNT_ID.js"></script>
  <!-- other scripts follow here -->
</head>

Copy the code from the dashboard, not from this page: only the dashboard shows your account ID instead of YOUR_ACCOUNT_ID.

Don't add async or defer. The code has to run before the page appears, so that visitors from identified companies see the matching text right away.

Whether the code may load before consent is a question for your data protection advisor. If your consent tool blocks the code until consent, Webmetic shows the texts only after that. For questions about the data the code sends, contact Support.

If a caching plugin delays or bundles your scripts, exclude api.webmetic.de/sp/ from that. Add the code only once per page, because it has no protection against loading twice.

The Webmetic template for Google Tag Manager and the Webmetic plugin for WordPress only add the tracking code. The Smart Pages code goes directly into your website's HTML.

3. Publish the changeCopy Anchor Link

1. Publish the change on your live website.
2. Clear all caches, for example in your CMS or in a caching plugin. Otherwise your website still serves the old version without the code.

After that, a page cache doesn't get in the way of Smart Pages, because the code fetches the texts again on every visit.

Check the installationCopy Anchor Link

The check opens your Smart Page's address in a browser and looks for the code there, not on other pages of your website.

1. In your Smart Page's editor, click Integration.
2. Click Check integration. After up to a minute, Webmetic shows the result.

If the code sits correctly on the page, Webmetic shows the message Snippet installed correctly.

After that, the button reads Check again, and in the editor a green dot on the Integration button shows that Webmetic found the code. Webmetic also checks this when you open the editor.

A missing code blocks neither testing nor going live. If the code is missing, Webmetic opens this dialog by itself at both points. The Test anyway button then leads to the test link, and Publish anyway to the Check & go live dialog.

If the check reports problemsCopy Anchor Link

If the check doesn't find the code, it shows one of these messages:

If the check finds the code but detects problems, it shows the message Snippet found, but: with one line per problem below:

For more causes, see Troubleshooting.

script-src https://api.webmetic.de;
connect-src https://api.webmetic.de;

Next stepsCopy Anchor Link