Web Designer Blog
The latest news and tips from the Google Web Designer team
Working with Dynamic Text in Google Web Designer
Tuesday, December 19, 2017
When working with dynamic text, you might encounter the problem where the text ends up longer than expected. If you have this issue, we have the solution! In this blog post you’ll learn to control your dynamic text while maintaining the integrity of your visual design.
Consider the following example: starting with a new blank file, let’s make the background gray, add 2 white divs, and place text elements on top. You can see that the text content is bound to the product name in the Dynamic panel.
When previewed, it looks like this:
But when adding extensive sample text, you’ll see this issue:
There are actually two issues occurring here: the right item text has become smaller, and it's also overflowing its container.
Truncation & Minimum Font Size
To fix both issues, let's switch to Code view and search for the gwd-text-helper tag following the body tag. Copy the code below and paste it inside the tag before the closing bracket.
gwd-fitting-truncate="true" gwd-min-font-size-px="7"
Now when previewed, it will look like this:
Much better. The text now stays within its bounding box due to truncation—but it might be a little small. That’s easy to adjust by editing the
gwd-min-font-size-px
attribute added above. Currently it's set to 7, but adjusting it to 12 may look better, and there are 2 ways to do that—either in the
gwd-text-helper
tag to specify a global setting for all text in your document, or to control each text element separately (common for headlines or titles), add the tag directly to the paragraph element like this:
You may also prevent text resizing entirely by using a
gwd-min-font-size-px
value equal to your initial size (16px in this case).
These controls should solve most dynamic text issues, but there is one case where you may want a little more control—the case of vertical centering. Let's duplicate the two text boxes and bind their content to products 2 & 3 (I’ve also adjusted the amount of text to demonstrate the issue):
Vertically Centering Dynamic Text
You may also want to vertically center text fields, so let's go ahead and do that for products 2 & 3. First wrap each text field in a new div by right-clicking the paragraph element and selecting “wrap”. We’ll also name the new div with the -ctn suffix, and use -txt for text elements to help keep things organized.
Double-click the new -ctn div to edit the paragraph element and apply these settings in the CSS panel:
left: 0
;
width: 100%
;
top
: should be de-selected
Change
height
to
max-height: 100%
Next open Code View and add the class
v-center
to the paragraph tag.
Repeat the above steps for both new text fields.
Finally, copy the following code and paste it at the end of the CSS styles in the "head" element of your document:
p {
margin: 0px;
}
.v-center {
position: relative;
top: 49%;
transform: translateY(-50%);
}
.v-bottom {
position: relative;
top: 100%;
transform: translateY(-100%);
}
Now when previewed, your text fields should be vertically centered as shown below:
Note the v-bottom class above can be used in cases where the text needs to be aligned at the bottom of its container.
With these three controls in hand (truncation, minimum font size, and vertical positioning), you should be able to solve the most common dynamic text formatting issues. Give these tips a try and let us know how they work for you in the comments!
Posted by Kent M, Google Web Designer
Creating custom exits for dynamic remarketing creatives
Monday, April 3, 2017
Dynamic remarketing
is a great way to improve your advertising performance, especially if your goal is to sell more products. However, working with a dynamic creative can be tricky. Some of the values required by your creative, like call to action (CTA) text, Product Names, Exit URLs, etc., are not known ahead of time and come from a product "feed". Google Web Designer's Dynamic properties dialog can help you bind such values to elements in your creative, but what if you want to post-process these values before they are bound to your creative?
In this article, we will tackle one such case - adding a custom exit function to your dynamic remarketing creative, which lets you post-process the exit URL before exiting to it.
⚠
When working with a URL, take special care to generate a valid URL and keep in mind that some browsers have a maximum supported URL length.
Let's say you have created the six-product creative below for dynamic remarketing in DoubleClick Bid Manager.
Let’s begin by adding a custom exit for product 0:
Step 1: If applicable, remove the dynamic bindings for the "Exit Override URL" within the Tap Area component of product 0.
⚠
Without this change, clicking on your creative can lead to more than one exit.
Step 2: Select the tap area for product 0 (the first product).
Step 3: Add a new event for the tap area by clicking the "+" button on the Events panel.
Step 4: Select Tap Area > Touch/Click as the event.
Step 5: For the action, select Custom > Add custom action.
Step 6: Add a function name (e.g., mycustomexit0) then paste the below code snippet into the text area. Replace the comment with the logic for your custom post-processing, then click OK.
var exitURL = dynamicContent.Product_0_url
// Custom post-processing happens here
Enabler.dynamicExit("exit", exitURL, "0")
💡
Use Enabler.dynamicExit() instead of the traditional Enabler.exitOverride() for dynamic creative exits and pass in the product index as the third parameter. This helps Google's optimization engine understand which product was clicked on, and allows us to further improve performance of dynamic creatives.
Repeat the above steps for the other five products in the creative, changing the index accordingly, e.g., for the second product, use index 1, and so on.
To test your changes, follow the steps in the Bid Manager dynamic creative
help center article
to upload your creative in Bid Manager. Then, preview the creative and click on the products to verify your custom exits are working as expected.
Creating custom exits isn't so tricky after all! We've just shown you how your dynamic creative can use custom exits and send information about product-level clicks. If you require post-processing of exit URLs, try these steps with your creatives and let us know what you think in the comments below.
Posted by Manikandan, Software Engineer
Labels
3D
animation
animations
BYOC
carousel
clips
css
CTA
custom code
Display
DoubleClick Bid Manager
DoubleClick Studio
dynamic
engagement ads
English
events
exit
fluid layout
gallery
google cultural institute
google web designer
Google Web Designer Blog
groups
HTML5
javascript
lightbox
looping
masking
new release
new version
pages
publish
responsive
sales animation
swatches
swipeable
text
timeline
UI
Archive
2018
January
Google Web Designer Tips - Part 2
2017
December
April
March
2016
November
June
May
April
March
February
Feed
Follow @googlewdesigner
![[UNSET].png](https://lh3.googleusercontent.com/kdJcflHQcacxIpw9rg3qnED9G_fABXltRevKfrA1fyEUwo1m6ilUCgsEMcJYGpKUWW_7BcH5CkO7JJh9cm1cM0lHNwTuVizaApYti8lYAbkFTCHcf8qfNCvBXgGet81hVr14501P)
![[UNSET].png](https://lh4.googleusercontent.com/ez4xNAIYjJAaaHjBT_89sWUw8gQSP73acYR1qPPrMk4vdB7KOxsuhIokVwD42UkYbSp3anOizTOQOrPqc-XyEBD2ziJca7pKzxq04q0s-WGRRVlWoXMbLT9sqXQsRV_uKQNLHfMc)
![[UNSET].png](https://lh5.googleusercontent.com/vBRPvxLYdvAnznc6KsPfDQEXweQk3T1nimZ-DbHNwBlBjI5VUsCZtAYloHzZ4lXFx_7zvOxjy_vtw9Q4sP7TfQa8j6qNbHjvpTpWsCUSO1N4bs6PjKzbylygMwBRJ0xW1b-byXWA)
![[UNSET].png](https://lh4.googleusercontent.com/rSasP1ceaQMjd8m_qa0y5ULK-DGmY0G7nUP79kyf8ajfS7pVbCHPqSrkxo2jscVeUAsKe5k2Rjp82wRijLwK6V2-Cz5flJyeB8OblejG42lrnvYDjMHSHK5iMWW3H3UBgevrlrXj)
![[UNSET].png](https://lh4.googleusercontent.com/cptDTyW7LkF-6SAUMZ397C4tvN8FunDJbDcLvOMIPADq-6ybTW5i2RMU7Abx5Y1Dzn_r-DbFulMyGv--NcLsdRyWuSHzGQnelYltBlHs5K3wJCfSYoOflwTb3KVjL92HWaMKIjdq)
![[UNSET].png](https://lh3.googleusercontent.com/fgL2oOjdk6SJbxcmho4sEjagCq_J2VIxVNet6HTzyArPLiltoSwJb0Bu1MAKXiIw6uJ_c7IFCM4buLyZhbwpEXOgndVFsSwCNnRBEuUCK7hLUcUWYvHyFTwjRsPVYkGdIPQsfbPc)
