Firstly, you will need to create an id attribute to mark the container in which you want to display the counter. It might be on the <p> element for an inline solution or on <div> element were you to create a more visual version.
Next, the spans. Add empty <span> elements with the class corresponding to the time unit you want to show. JavaScript will swap it for the correct numeric value and dynamically change it as time passes. You can add just hours, or you can go for full spectrum.
For example, did you know there is only 148 days, 21 hours, 15 minutes and 26 seconds left till 55th anniversary of the first moon landing?
+For example, did you know there is only 148 days, 21 hours, 12 minutes and 21 seconds left till 55th anniversary of the first moon landing?
<p id="counter1">
For example, did you know there is only <span class="days"></span> days, <span class="hours"></span> hours, <span class="minutes"></span> minutes and <span class="seconds"></span> seconds left till 50th anniversary of the first moonlanding?
</p>
<script>
function getTimeRemaining(endtime) {
const now = new Date().getTime();
const t = endtime - now;
const seconds = Math.floor((t / 1000) % 60);
const minutes = Math.floor((t / 1000 / 60) % 60);
const hours = Math.floor((t / (1000 * 60 * 60)) % 24);
const days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(element, endtime) {
const clock = document.querySelector(element);
const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');
function updateClock() {
const t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
const timeinterval = setInterval(updateClock, 1000);
}
/* Declare deadline time */
const deadline = new Date("2019-07-20T20:17:00+00:00").getTime()
/* Trigger counter function by targeting specific element and passing the above deadline */
initializeClock('#counter1', deadline);
</script>
There is much more fun in the JavaScript part. Worry not - you don't need to know the language at all. Let's have a look at the lines to understand what is happening on the general level and then focus on personalisation options.
diff --git a/docs/js/snippets/export-import-document-sfmc-roles/index.html b/docs/js/snippets/export-import-document-sfmc-roles/index.html index 7fe943d09..6a7c4d0d9 100644 --- a/docs/js/snippets/export-import-document-sfmc-roles/index.html +++ b/docs/js/snippets/export-import-document-sfmc-roles/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/js/snippets/tailor-with-data/index.html b/docs/js/snippets/tailor-with-data/index.html index 5965d9c0a..7dafa2528 100644 --- a/docs/js/snippets/tailor-with-data/index.html +++ b/docs/js/snippets/tailor-with-data/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/sfmc-sql-aggregate-functions/index.html b/docs/sql/sfmc-sql-aggregate-functions/index.html index 970f0d5b9..b55d27ec3 100644 --- a/docs/sql/sfmc-sql-aggregate-functions/index.html +++ b/docs/sql/sfmc-sql-aggregate-functions/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/sfmc-sql-basics/index.html b/docs/sql/sfmc-sql-basics/index.html index 4b41e465a..abafc6338 100644 --- a/docs/sql/sfmc-sql-basics/index.html +++ b/docs/sql/sfmc-sql-basics/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/sfmc-sql-case/index.html b/docs/sql/sfmc-sql-case/index.html index bd9ab8666..14e4ec48a 100644 --- a/docs/sql/sfmc-sql-case/index.html +++ b/docs/sql/sfmc-sql-case/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/sfmc-sql-conversion-functions/index.html b/docs/sql/sfmc-sql-conversion-functions/index.html index 48e73841f..fe609e547 100644 --- a/docs/sql/sfmc-sql-conversion-functions/index.html +++ b/docs/sql/sfmc-sql-conversion-functions/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/sfmc-sql-date-functions/index.html b/docs/sql/sfmc-sql-date-functions/index.html index 00b445560..cc844631c 100644 --- a/docs/sql/sfmc-sql-date-functions/index.html +++ b/docs/sql/sfmc-sql-date-functions/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/sfmc-sql-from/index.html b/docs/sql/sfmc-sql-from/index.html index 40f230826..4717d4ae3 100644 --- a/docs/sql/sfmc-sql-from/index.html +++ b/docs/sql/sfmc-sql-from/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/sfmc-sql-join/index.html b/docs/sql/sfmc-sql-join/index.html index a5ad4e75b..454a510fe 100644 --- a/docs/sql/sfmc-sql-join/index.html +++ b/docs/sql/sfmc-sql-join/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/sfmc-sql-like/index.html b/docs/sql/sfmc-sql-like/index.html index ebb7fbacd..c73bfbffc 100644 --- a/docs/sql/sfmc-sql-like/index.html +++ b/docs/sql/sfmc-sql-like/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/sfmc-sql-null-functions/index.html b/docs/sql/sfmc-sql-null-functions/index.html index 9923fe1f5..28afa951b 100644 --- a/docs/sql/sfmc-sql-null-functions/index.html +++ b/docs/sql/sfmc-sql-null-functions/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/sfmc-sql-numeric-functions/index.html b/docs/sql/sfmc-sql-numeric-functions/index.html index 606f2b825..6c5a86130 100644 --- a/docs/sql/sfmc-sql-numeric-functions/index.html +++ b/docs/sql/sfmc-sql-numeric-functions/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/sfmc-sql-select/index.html b/docs/sql/sfmc-sql-select/index.html index 9d616a078..138edcc05 100644 --- a/docs/sql/sfmc-sql-select/index.html +++ b/docs/sql/sfmc-sql-select/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/sfmc-sql-string-functions/index.html b/docs/sql/sfmc-sql-string-functions/index.html index 096feb7c2..65a986599 100644 --- a/docs/sql/sfmc-sql-string-functions/index.html +++ b/docs/sql/sfmc-sql-string-functions/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/sfmc-sql-style-guide/index.html b/docs/sql/sfmc-sql-style-guide/index.html index bbc75b762..576f2abc1 100644 --- a/docs/sql/sfmc-sql-style-guide/index.html +++ b/docs/sql/sfmc-sql-style-guide/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/sfmc-sql-where/index.html b/docs/sql/sfmc-sql-where/index.html index 63b9c28b8..45b4f4481 100644 --- a/docs/sql/sfmc-sql-where/index.html +++ b/docs/sql/sfmc-sql-where/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/snippets/sfmc-sql-debugging-email-sends/index.html b/docs/sql/snippets/sfmc-sql-debugging-email-sends/index.html index 1c86d23e2..284f30459 100644 --- a/docs/sql/snippets/sfmc-sql-debugging-email-sends/index.html +++ b/docs/sql/snippets/sfmc-sql-debugging-email-sends/index.html @@ -10,7 +10,7 @@ - + diff --git a/docs/sql/snippets/sfmc-sql-debugging-value-length/index.html b/docs/sql/snippets/sfmc-sql-debugging-value-length/index.html index 936e51717..1862168c8 100644 --- a/docs/sql/snippets/sfmc-sql-debugging-value-length/index.html +++ b/docs/sql/snippets/sfmc-sql-debugging-value-length/index.html @@ -10,7 +10,7 @@ - + @@ -34,7 +34,7 @@For example, if out of your whole database, the longest First Name is 33 characters, you will probably be just fine with a maximum length of 40 on this field. If a picklist field returns you 5 with this query - you won't need the default 255 characters.
Of course, as mentioned above, the values might get longer in the future. But as Marketing Cloud allows you to change maximum field length up but not down, it might be a good idea to try as low as reasonable and leave space for growth.
The second use of the above snippet is quick debugging when an error occurs. Execute it in Query Studio and compare against the column lengths you set up in your Data Extension. If you see in Query Studio any value longer than the maximum you set up in Data Extension - you found a culprit.
+The second use of the above snippet is quick debugging when an error occurs. Execute it in Query Studio and compare against the column lengths you set up in your Data Extension. If you see in Query Studio any value longer than the maximum you set up in Data Extension - you found a culprit.
Now you can look in the data source and check whether this longer-than-expected value is correct. If yes, it is time to update your maximum length in the Data Extension and Profile Attribute configuration.
In most cases, the field length of 255 should be more than enough. But if you need it, Marketing Cloud allows you to go up to 4000 characters per field.
4000 characters length is an instant way of getting over the recommended limit, but it might be useful for logging Data Extensions that you won't query in the future. For example, if you want to save _Bounce Data View to standard Data Extension, SMTPBounceReason might use such a long field.
If you need more, there is a trick reported by Markus Slabina. Use Email Studio to add a new field and make the length empty. Save. It will create a nvarchar(max) field that allows absurdly long data to be stored.
Remember that:
Remember that if you implement this option, it will impact the output length in your technical Data Extension. 4 characters will be no longer enough. 22, however, will work like a charm.
After applying both of the above options to the Basic SQL Snippet, it looks like this:
-SELECT
c.Id AS ContactID
, CASE
WHEN 18 - LEN(c.Id) < 0
THEN CONCAT(LEN(c.Id), '(', LEN(c.Id) - 18, ' over limit)')
END AS SubscriberKey
, CASE
WHEN 40 - LEN(c.FirstName) < 0
THEN CONCAT(LEN(c.FirstName), '(', LEN(c.FirstName) - 40, ' over limit)')
END AS FirstName
, CASE
WHEN 80 - LEN(c.LastName) < 0
THEN CONCAT(LEN(c.LastName), '(', LEN(c.LastName) - 80, ' over limit)')
END AS LastName
, CASE
WHEN 254 - LEN(c.Email) < 0
THEN CONCAT(LEN(c.Email), '(', LEN(c.Email) - 254, ' over limit)')
END AS EmailAddress
, CASE
WHEN 80 - LEN(c.JobTitle__c) < 0
THEN CONCAT(LEN(c.JobTitle__c), '(', LEN(c.JobTitle__c) - 80, ' over limit)')
END AS JobTitle
, CASE
WHEN 40 - LEN(c.Industry__c) < 0
THEN CONCAT(LEN(c.Industry__c), '(', LEN(c.Industry__c) - 40, ' over limit)')
END AS Industry
FROM Contact_Salesforce AS c
WHERE
18 - LEN(c.Id) < 0
OR 40 - LEN(c.FirstName) < 0
OR 80 - LEN(c.LastName) < 0
OR 254 - LEN(c.Email) < 0
OR 80 - LEN(c.JobTitle__c) < 0
OR 40 - LEN(c.Industry__c) < 0
SELECT
c.Id AS ContactID
, CASE
WHEN 18 - LEN(c.Id) < 0
THEN CONCAT(LEN(c.Id), '(', LEN(c.Id) - 18, ' over limit)')
END AS SubscriberKey
, CASE
WHEN 40 - LEN(c.FirstName) < 0
THEN CONCAT(LEN(c.FirstName), '(', LEN(c.FirstName) - 40, ' over limit)')
END AS FirstName
, CASE
WHEN 80 - LEN(c.LastName) < 0
THEN CONCAT(LEN(c.LastName), '(', LEN(c.LastName) - 80, ' over limit)')
END AS LastName
, CASE
WHEN 254 - LEN(c.Email) < 0
THEN CONCAT(LEN(c.Email), '(', LEN(c.Email) - 254, ' over limit)')
END AS EmailAddress
, CASE
WHEN 80 - LEN(c.JobTitle__c) < 0
THEN CONCAT(LEN(c.JobTitle__c), '(', LEN(c.JobTitle__c) - 80, ' over limit)')
END AS JobTitle
, CASE
WHEN 40 - LEN(c.Industry__c) < 0
THEN CONCAT(LEN(c.Industry__c), '(', LEN(c.Industry__c) - 40, ' over limit)')
END AS Industry
FROM Contact_Salesforce AS c
WHERE
18 - LEN(c.Id) < 0
OR 40 - LEN(c.FirstName) < 0
OR 80 - LEN(c.LastName) < 0
OR 254 - LEN(c.Email) < 0
OR 80 - LEN(c.JobTitle__c) < 0
OR 40 - LEN(c.Industry__c) < 0