Dynamic Content Support (DCS) is a JavaScript library designed for translating dynamically generated website content. As a feature of Smartling’s Global Delivery Network, it works in harmony with the translation proxy.
While the GDN translation proxy is used to translate content as it is transmitted to a browser, DCS captures source text that is rendered in the browser by JavaScript and related frameworks (e.g., React).
Here are some actions that DCS will take:
- DCS detects new source material as the localized page is loaded and browsed. Content that is rendered in the browser during interaction with page elements is also captured.
- DCS then sends that content to your existing GDN project in Smartling for translation.
- Once the translation process has been completed in Smartling, DCS inserts the published translations the next time the page loads.
Benefits of using DCS
Dynamic Content Support (DCS) works in combination with Smartling’s GDN web proxy.
While the GDN web proxy translates content being sent to the browser and builds the structure of your localized website, DCS automatically captures dynamic content rendered in the browser, without requiring a complex configuration to detect or handle the content.
Most modern websites utilize JavaScript to create dynamic, interactive features, such as animations, media playback, in-browser games, and real-time updates, which make websites more engaging and interactive. This creates challenges for translating content during its journey to the browser, as translatable text is often scattered across multiple areas of the JavaScript code and may only be assembled into legible text or sentences when displayed to an end-user visiting the site.
DCS solves this challenge by detecting and extracting content when it is rendered in the browser. This ensures that text, regardless of how it’s generated, can be accurately and seamlessly translated.
By combining the capabilities of the GDN web proxy and DCS, you gain a powerful and flexible solution for translating web content without relying on files, APIs, or custom connectors.
Key benefits
-
Improved content ingestion and string parsing
The GDN web proxy processes content "in transit" to the browser. When it does, it may ingest incomplete sentences or fragmented strings due to how the content is structured in the website’s code. DCS solves this by capturing the fully rendered text, exactly as it appears to the user after the page has loaded in the browser. -
Fewer rules to main
Traditionally, the GDN proxy has supported capturing dynamic content with the assistance of advanced rules and configurations. These rules are effective for capturing content from JavaScript and JSON data sources; however, if your website's code or structure changes, you may need to update these rules accordingly. DCS eliminates the need to define or manage static rules that depend on specific URLs or source code structures. DCS will continue to work and capture dynamic content as your website evolves, thereby reducing the effort required to maintain your translated website. -
Support for third-party content
DCS can ingest dynamic content from third-party platforms, such as forms hosted externally, even if the rest of your site is translated using the GDN web proxy.
How to enable DCS
Dynamic Content Support is enabled by default for all GDN projects created after August 2023.
If DCS is not suitable for your specific integration, it may have been disabled by the Smartling team. This is done by applying a rule to your project configuration, which overrides the default setting and deactivates DCS.
Tip: If your GDN project was created before August 2023 and you are interested in using DCS, please contact your Smartling Solution Architect to discuss a migration plan. If your current GDN integration uses advanced rules to capture dynamic content on your website, these will have to be revised with the help of Smartling Professional Services.
How to determine if DCS is enabled
As one of the GDN's core features, DCS is not surfaced as a separate rule in your project settings. Even if DCS is not listed in your GDN rules interface, this does not necessarily mean that it is disabled.
If you are unsure whether your project is currently using DCS, or if you would like to discuss enabling/disabling it, please contact your Smartling Solution Architect.
Info: Once enabled, the proxy will automatically inject the necessary elements into your web pages, and DCS will run whenever a user visits your localized site(s). The process of managing and configuring your localized domains and pages remains unchanged.
How a webpage is translated with DCS
DCS captures translatable text by detecting changes in the Document Object Model (DOM) when a page is rendered. It can identify and translate any content rendered in the DOM, ensuring users receive a fully localized experience.
What is the DOM?
When a webpage loads in a browser, the DOM (Document Object Model) acts as a structured representation of the page’s elements. It serves as a live workspace where scripting languages like JavaScript can read and modify content to create interactive experiences.
For example, the DOM enables features such as dropdown menus that expand on hover or complex web apps that change as users interact with them. All of this relies on dynamic updates to the Document Object Model (DOM).
As a page is loaded in a user’s browser, streams of information, such as HTML, JavaScript, and JSON, are assembled into a cohesive structure, which is then mapped in the Document Object Model (DOM). The DOM is often described as a tree, where each element on the page is a “leaf” connected through “branches” in a hierarchical structure. JavaScript can navigate this structure to find and modify specific elements in real-time, allowing pages to update dynamically without requiring a full page refresh.
When changes are made to the DOM (e.g., by loading in new text without refreshing the page), they are automatically detected by DCS and captured for translation.
How are translations applied to a webpage by DCS?
When a user visits a localized site for the first time, DCS activates and downloads your Translation File. This file contains an encrypted copy of all published translations from your Smartling project that are used by DCS.
As DCS detects changes in the page’s DOM, it extracts source strings as they are rendered in the browser. Each extracted string is checked against the Translation File:
- If a published translation exists, it is immediately displayed on the localized page.
- If no published translation exists, the source string is ingested into your Smartling project, where it can be authorized for translation.
Once a string’s translation is published in Smartling, it is added to the Translation File and will appear on the page the next time the localized page is visited.
Note: Please note that new translations can take up to 20 minutes to be added to the Translation File.
What does a page translated with DCS include?
A page using DCS loads at least two files in the process of rendering the localized page:
- A JavaScript file to translate the content (the DCS library)
- A Translation File containing the published translations from your Smartling project
- Depending on how your website is configured, a third custom JavaScript file can be included to define any non-standard translation behavior. For example, a request to implement a "noingest" rule.
Tip: If a large portion of your site is translated using DCS, it can generate a larger Translation File, which may affect page load times. If you’re using DCS to translate significant portions of your site, contact your Smartling Solution Architect for guidance.
Important considerations
For the most part, content ingested with DCS is managed in the same way as strings ingested by the GDN translation proxy. However, there are some important considerations to bear in mind.
Identifying content captured with DCS
Strings captured by DCS are uploaded to your regular Smartling GDN project, which is also used for the GDN proxy. You can identify these strings in the Strings View by looking for the /origin-pjs/ prefix in the ingestion URL.
What is the ingestion URL?
Example:
When searching for a specific URL in the Strings View and using an "Exact Match" filter, please bear in mind that strings captured by DCS will only be returned if the prefix /origin-pjs/ is added to the URL you are filtering for.
Example:
Similarly, when creating a Jobs Automation Rule with a content filter, the prefix /origin-pjs/ must be added to include/exclude strings captured by DCS. Alternatively, use a wildcard to include/exclude both strings captured by DCS and strings captured with the proxy.
Example:
Visual context
DCS does not provide visual context for the strings that it captures. This means that some additional configuration is required to display visual context for content ingested with Dynamic Content Support.
Tip: Consult your Smartling Solution Architect, who can assist you with the best way of uploading visual context to your Smartling project.
Content swaps and rewrites
Dynamic Content Support cannot be configured to create locale-specific content, such as advanced rewrites and content or image swaps.
Tip: To set up customized content for your localized domains, please speak to your Smartling Representative about combining Dynamic Content Support with Smartling’s GDN web proxy.
Supported rules
Most GDN rules and advanced rules are not supported for content captured with DCS.
Currently, DCS supports the following rule types:
- "Do Not Translate" rules - see below for more information
- "Mask" rules to automatically turn elements such as numbers or dates into placeholders
Tip: If you would like to apply a rule which is not currently listed as being supported for DCS, please speak to your Smartling Solution Architect.
Excluding content from translation
By default, all content detected by DCS will be uploaded to Smartling for translation.
HTML elements that should remain untranslated can be excluded from the translation process by applying a "translate=no" HTML attribute.
Alternatively, you can use dashboard rules to keep portions of a page from being translated. Currently, DCS only supports “Do Not Translate” rules created in the Smartling dashboard.
These “Do No Translate” rules can be set to avoid capturing the following attributes:
- Page URL
- HTML Class
- HTML ID
- CSS Selector
Note: Any "Do Not Translate" rules created for your Smartling project are universal and will apply both to content captured with the GDN proxy, and to content captured with DCS.
Placeholder patterns
Similarly to placeholders in resource files, pattern matching rules can be used to help reduce the cost of translating repetitive text on your website that contains dynamic variables, such as order numbers or prices.
The following is an example of a string ideal for pattern matching:
Pattern matching will ensure that instead of the actual number, a placeholder is used:
Patterns can be created via the Smartling dashboard as shown here. A placeholder will then be applied to any new strings matching the same pattern.
Note: Patterns will also apply to any new strings detected by DCS. The same patterns that were created for strings ingested with the proxy will also apply to content captured by DCS.
Alternative ways of applying placeholders
An alternative to creating patterns in the dashboard after text has been ingested is to edit your site code to include in-line No Translate tags. These will work similar to patterns and have the same net effect of reducing the ingestion and translation of repetitive strings that contain dynamic elements.
DCS also supports "Mask" type rules, which will automatically turn elements such as numbers or dates into placeholders.
Preventing bleed-through: Site-wide machine translation
To provide a seamless experience in each target language, a provisional machine translation can be displayed for each translatable string on your website. This helps prevent bleed-through of source language text on your localized pages.
Once the strings have been captured and fully translated, the machine translation is replaced with the final published translation from your Smartling project.
Site-wide machine translation also works on content that will be captured with DCS.
Tip: You can find more information on setting up site-wide MT in our video tutorial.
Troubleshooting & FAQ
Why do my published translations not appear on the localized page?
New translations can take up to 20 minutes to be added to the Translation File.
Why am I experiencing longer load times on my localized pages?
If a large portion of your site is translated using DCS, it will generate a larger Translation File, which may affect page load times. If you’re using DCS to translate significant portions of your site, contact your Smartling Solution Architect for guidance.
What can I do if DCS captures content that is already translated?
In some instances, DCS may detect some content that was already translated by the GDN proxy. If this occurs, please contact your Smartling Solution Architect for guidance on how to prevent capturing translated content.
Does prepublishing work for content captured with DCS?
Yes, prepublished translations will be included in the Translation File used by DCS and displayed on the localized page.