DM9: Growth engineering: referrals, sharing and lifecycle messages
Share links, previews and deep links
🎯You'll be able to
Make share links that preview well in WhatsApp and social apps, measure sharing with campaign tags, and use deep links into apps.
🏠The everyday picture
When you forward a recipe to the family group, a clear photo and title make people tap it; a bare, long address gets ignored.
📘What it really is
-
Share buttons: the Web Share API (
navigator.share) opens the phone's own share sheet; fallbacks are WhatsApp links (https://wa.me/?text=…) and copy-link buttons. -
Link previews come from Open Graph tags in the page's
<head>:og:title,og:description,og:image(a clear image, often 1200 × 630 pixels) andog:url. WhatsApp, Facebook, LinkedIn and others read them. -
Measure sharing: add campaign tags to shared links (
utm_source=whatsapp&utm_medium=share&utm_campaign=product-share, DM5) and send ashareevent when someone presses Share. -
Deep links open a specific screen in an app if it's installed (and the web page if not), for example through Android App Links and iOS Universal Links.
-
Privacy: shared links shouldn't contain the sharer's personal data or a reusable login. Referral codes are fine; email addresses aren't.
-
Respect the friend: sharing is the customer's choice. Don't share on their behalf or pre-select contacts.
📝A worked example
Input: MittiMart's product pages have no Open Graph tags.
Steps:
- Add
og:title(the product name),og:description(one line),og:image(the product image's full address) andog:url(the canonical address) to each product page. - Add a Share button that uses
navigator.sharewhen available and a WhatsApp link otherwise, with campaign tags on the link. - Send
sharewithmethodanditem_id(and nothing personal) when the button is pressed, after consent.
Expected output: a design for the capstone notes; adding Open Graph tags doesn't affect the kit's tests. (A real preview check needs a public address: not verified.)
🌍Where it's used
- Shops add WhatsApp share buttons on product pages, popular in India.
- News sites set Open Graph images for every article.
- Apps use deep links in emails and notifications.
📝Case scenario
A jewellery shop's product links showed only its logo in WhatsApp previews, because every page had the same og:image. Setting each
product's own photo as its preview image noticeably raised visits from shared links, measured with campaign tags.
🖱️Try it
Paste a link to a product from any shop into a chat with yourself and look at the preview. Then view the page source and find its
og: tags. Success: you can match each part of the preview to a tag.
⚠️Common mistakes
- No Open Graph tags. Sign: plain or wrong previews. Fix: title, description, image and address on every shareable page.
- Untagged share links. Sign: shared visits counted as "direct". Fix: campaign tags on share links.
- Personal data in shared links. Sign:
?ref=asha.rao@…. Fix: a referral code, not contact details.
🛠️For your project
Your capstone's design notes can include MittiMart's share feature with its tags and event.
✅Quick check
Which tags control how a link previews in WhatsApp?
Show the answer
Open Graph tags such as og:title, og:description, og:image and og:url.
How do you measure visits from shared links?
Show the answer
Campaign tags on the shared link, plus a share event when the button is pressed.