You can display certain HTML content on your website or Pardot forms, landing pages, layout templates and emails based on a prospect’s score, grade, or field value for default fields or custom fields. As people match the criteria set for your dynamic content, a variation of content will display where you embed the generated code on your website or email.
While Dynamic Content allows you to show specific content to your prospects based on their criteria, you can also redirect prospects to unique content after form submission based on their criteria. For more information, please see Redirecting to Thank You Pages Based on Form Field Value.
Note: As of February 1, 2014 Dynamic Content is available as an add-on to Professional and Enterprise Email Editions as well as Standard Database Edition.
- Go to Marketing > Content > Dynamic Content.
- Click + Add Dynamic Content.
- Enter an internal Name and optional Tags.
- Set the Default Content by hovering over the content and clicking Edit to display the content editor.
- Note: Default Content will appear when someone does not match one of the variations.
- Create your content using the graphical editor.
- Click Save.
- Select the field value you would like to base your Variations on: Score, Grade, Default prospect field, or Custom prospect field.
- Specify the value for the field that prospects should match (e.g., “If [field] is/contains” or “If [score/grade/number field] is/is between/is greater than (or equal to)/is less than (or equal to)”).
- Set the Variations by hovering over the content and clicking Edit to display the content editor.
- Note: CSS on the webpage where you embed the variation will affect the appearance of the content variation.
- Create your content using the graphical editor.
- Click Save.
- You can add additional variations (up to 25) by repeating steps 7-8.
- Once you have your variations in place and prioritized by restrictiveness, click Save.
- You should prioritize your variations in order of the restrictiveness of the criteria. If a prospect matches multiple criteria, the prospect will see the first variation they match. For example, you have two variations listed in this order: 1) having a score greater than 50 and 2) having a score greater than 100. The prospects with a score over 100 will see the content for score of 50 because it is listed before they have a chance to match the second variation’s criteria.
- HTML content is the only content you can use; PHP is not supported.
- Fields with the field type “date” cannot be used for variations in dynamic content.
Placing Dynamic Content on Website
- Click on the dynamic content file that you would like to embed.
- Click View Embed Code.
- Copy the embed code.
- Paste the embed code in your website’s HTML source code where you would like the content to appear.
Note: The CSS on your webpage or layout template will affect the embedded content.You can also embed the code in Pardot items: above or below form content, form’s thank you content, landing page opening general content, or layout template.
Testing Dynamic Content on a Website
Testing your dynamic content allows you to view each variation as it will appear in the page, as if you were viewing the content as a prospect who matches that variation’s criteria. We strongly recommend you test your dynamic content to ensure your site’s CSS styling applies correctly to all variations.
- Drill down into the dynamic content you would like to test.
- Click Testing Tools.
- Select the variation or default content to preview. It will load a one-time cookie for you to view the variation as if you match the criteria.
Note: A Security Warning will appear saying “Although this page is encrypted, the information you have entered is to be sent over an unencrypted connection and could easily be read by a third party.
Are you sure you want to continue sending this information?” There is no harm from clicking Continue. A pop-up window will appear saying “The Cookie was set.” This message appears because Pardot is setting a cookie on your public domain. The message means that Pardot is viewing you as a prospect (with the specified criteria selected). This is only for testing purposes and will never be seen by your prospects.
Placing Dynamic Content in an Email
- Click on the yellow lightning bolt icon located in the menu bar of Pardot’s email editor.
- Select the dynamic content from your account that you’d like to pull into your email and click Insert.
- Once the content is saved, the dynamic content in the email preview will be replaced by the variable tag.
- When the email reaches the prospects’ inbox the dynamic content variable tag will be replaced by the actual dynamic content that matches the criteria for that prospect.
Testing Dynamic Content an Email
The best way to currently test dynamic content in emails is to send the email to a test list.
- Before creating the test list you will need to set up different prospect records, which meet the criteria for the different dynamic content.
- The different prospect records should include email addresses, which you can access (your email address or your colleagues’).
- Please see our Testing Emails article for more information on setting yourself as a prospect.
- Create the test list. Please refer to our Lists article for further instructions.
- Send the email including the dynamic content to this test list.
- Review the email in the different prospects’ inboxes to confirm that the different prospects receive the correct dynamic content.
Optimizing Dynamic Content Performance
With a couple of small changes, you can optimize your dynamic content so it loads asynchronously after the rest of the page has loaded.
- Place <div> elements where you would like the dynamic content to appear on the page.
- Specify a data-dc-url=”[URL for your dynamic content]” attribute.
- You’ll also want to style those div elements to have the same width and height as the content that will be dynamically inserted so the layout does not have to re-flow when the dynamic content is added to the page. Example:
<div data-dc-url="http://www2.pardot.com/dcjs/1/17/dc.js" style="width: 200px; height: 200px;"></div>
- Then, add the following script (jQuery is required on the page):