Product Manager: You can implement the shared URL to preview the image, title and description.

Product Manager: Sunshine, add the function of sharing out of the end to the project!

Me: Share a URL link to other app platforms?

Product manager: I see that rival products also have this function. After they added off-end sharing, the number of users on the platform soared. What’s going on? Research found that because the shared URL links to other platforms will appear preview images and titles, I think it is quite good, let’s copy it over!

Sharing a URL to another app platform. For example, feibook, Twitter, Facebook and other platforms. The links I share appear with images, titles, descriptions, etc. As shown below.

You can’t imagine how many users will click on a shared link if it shows an eye-catching image like Black silk. Rather than a cold URL like the one below, who knows what is being shared without any desire to click.

sigoyi~~

Then began a day of tinkering ~~

How do links have images, descriptions, and titles?

Add this code to the HTML page you share, and the content value says what you want to show

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
Copy the code

Why is this code a preview of shared links?

Social software, such as Feishu, enterprise wechat, WhatsApp, Twitter, Facebook and so on, will grab the content of your given URL according to the link to determine which attributes should be included for sharing display.

The fetched data is the property we explicitly defined by writing OG :tags.

What is OG?

Open Graph Protocol, or OG Protocol. It is a Meta Information tagging protocol published by Facebook. It belongs to the category of Meta Tag. It is a Meta Tag developed for social sharing and used to standardize the use of metadata in web pages. Enables social media to represent shared page content as rich “graphic” objects.

Other social apps followed suit! So other apps can do this as well.

Of course, Twitter has also expanded on this foundation, so we need to add the meta header of twitter extension to make the link preview look better

<meta property="twitter:title" content="The Rock" />
<meta property="twitter:type" content="video.movie" />
<meta property="twitter:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="twitter:image" content="https://ia.media-imdb.com/images/rock.jpg" />
Copy the code

Soga, but this only leads to a higher click rate of the link, where does the increase in user numbers come from?

There will be a button on the shared page that prompts the user to click to install the app.

After the user clicks this button, it will automatically judge whether the app has been installed in the user’s mobile phone. If so, it will open the APP and automatically adjust the page we point to in the APP.

If the user does not have the app installed, it will automatically direct the user to the App Store to install the app. When the user installs the app and logs in, the page we point to will be automatically activated

5. How to implement this automatic judge and jump behavior?

I’m using onelink from AppsFlyer

Vue.prototype.$goToOpenApp = function (event) {
  var weburl = window.location.href
  var target = `bigolive://web? url=The ${encodeURIComponent(weburl)}`;
  var url = `https://bingobingo.onelink.me/115925328? pid=ActivityTemplate&is_retargeting=true&af_dp=The ${encodeURIComponent(target)}`;

  window.open(url, '_blank');
}
Copy the code

Appsflyer, a service provider of data attribution statistics, was founded in Israel. Since it has a cooperative relationship with many platforms (including Facebook), its home service is used for overseas launching, especially when facebook launching needs to monitor the active downloading. Onelink is their version of Deeplink.

6. What is OneLink

So what exactly is OneLink™?

To put it simply, OneLink can jump to Google Play, App Store, Windows Phone Store or any specified landing page URL through a single link, automatically identifying device system (Android/iOS). With deep integration with Deeplink and Deferred Deeplink, OneLink also makes it easy to direct existing and new users to specific promotional pages, making it much more effective.

7. What are deep links and delayed deep links?

Performance of deep link: When the user installs the APP, click the “Open APP” button of the sharing page, the APP will be directly opened and the corresponding “up” page will be redirected

Delayed deep linking: When the user does not have an app installed, click the open app button on the share page, and OneLink will quickly identify the user’s device type and take the user to the correct app store. Then the delayed deep link comes into play. When a new user downloads the App, AppsFlyer will deliver relevant attribution information to the device in real time, so that the page corresponding to Campaign information will be displayed automatically when the App is opened for the first time.

As the name implies, delayed deep linking is to delay deep linking until the user installs the APP.

URL Scheme is the most compatible and easiest way to achieve Deeplink Deeplink. Native apps can register a URL with the operating system first, and Scheme’s function is to wake up corresponding apps from different platforms.

The protocol style of the URL Scheme is as follows:

Scheme://host:port/path? queryCopy the code

● Scheme: indicates the protocol name of Scheme, which can be customized. ● Host: indicates the address domain used by Scheme. ● port: indicates the port number of the pathCopy the code

8. Since OneLink is so boring, how to quickly configure and generate an OneLink?

Refer to this article for configuration dependencies

https://blog.csdn.net/lizhong2008/article/details/117705767
Copy the code

Let’s focus on introducing Onelink into our code. In general, onelink’s configuration is not developed. Use as follows:

Vue.prototype.$goToOpenApp = function (event) {
  var weburl = window.location.href
  var target = `bigolive://web? url=The ${encodeURIComponent(weburl)}`;
  var url = `https://bingobingo.onelink.me/115925328? pid=ActivityTemplate&is_retargeting=true&af_dp=The ${encodeURIComponent(target)}`;

  window.open(url, '_blank');
}
Copy the code

This is what we’ve configured for Onelink

https://bingobingo.onelink.me/115925328?pid=ActivityTemplate&is_retargeting=true&af_dp=${encodeURIComponent(target)}
Copy the code

The user who clicks on this link will open the app or go to the App Store, and then open the Target page that we’ve written, which is actually a Deeplink.

To explain onelink parameters:

1168916328 is the unique OneLink ID that each OneLink has
Pid and IS_retargeting questions provide the operator with the parameters for viewing the relevant data statistics report on AppsFlyer
Af_dp: A path that deeply links users to activities within an application.

In addition to these, there are other parameters:

Af_ios_url and AF_android_URL may be used frequently. These parameters are used when users do not have the app installed and do not want to go to the app store. They can go to the page specified by AF_iOS_URL or AF_android_URL. For example, the following onelink, when the user does not have the app installed, does not jump to the app store, but to the www.baidu.com page.

https://bingobingo.onelink.me/115925328?pid=ActivityTemplate&is_retargeting=true&af_dp=${encodeURIComponent(target)}&af_ ios_url=${encodeURIComponent(https.www.baidu.com)}&af_android_url=${encodeURIComponent(https.www.baidu.com)}Copy the code

9. Af_ios_url and AF_Android_URL Scenarios

Taking e-commerce as an example, suppose that the advertiser has chosen to jump to the corresponding store in the OneLink template, but in a New Year’s advertising series promotion activity, the advertiser wants the user to go to the landing page of the New Year promotion details first, so as to deliver richer information, and then lead to the store from the landing page.

At this point, you can override this by adding two simple parameters, the AF_iOS_URL and af_Android_URL parameters.

10. Precautions

Our call-up page links in onelink-written apps must be decoded with encodeURIComponent.
< meta property = “og: url” content = “https://www.imdb.com/title/tt0117500/” / > the meta, is actually a canonical url.

Canonical URL causes Facebook to look for preview images, titles, and descriptions of links we share in the meta declaration URL. So when we share a link that does not match the url declared by this meta, we will have the problem of displaying incorrect data.

This meta is actually good for SEO, so if you don’t think about SEO, consider deleting this meta.

The canonical tag is a way of telling search engines which version of a URL you want to show in your search results. Using the Canonical tag prevents problems caused by the same (or very similar) or “duplicate” content appearing on multiple urls.

Af_dp links in this parameter is to deal with such as: 【 bigolive (domain name) : / / article? Url = / CNT / 15664895 / news939964 html&newstype = 1.

Perfect. The test passed and the system was launched successfully

At 6 o ‘clock in the evening, I packed up my things and prepared to leave work.

The product manager came slowly over.

Product manager: Sunshine, do you have a girlfriend?

I (? The heartbeat is accelerated, difficult way want to introduce object to me, happy arrive take off) : I have no!

Product Manager: Ah, yes, that’s fine. Why don’t you work late tonight? I have another request for you.

I:…

tmd c!

References:

【 SEO optimization: talk page rel = “canonical” and og: url tag attributes] www.jiangweishan.com/article/seo…
[The Open Graph Protocol] ogp.me/
Savadika, OneLink™? Kknews. Cc/useful – my/news /…
【 AppLinking our quick quiz 】 developer.huawei.com/consumer/cn…
The experience about appsflyer deeplink using 】 zhuanlan.zhihu.com/p/88466945
OneLink platform attribution, jump, deep links 】【 blog.csdn.net/lizhong2008…
The experience about appsflyer deeplink using 】 zhuanlan.zhihu.com/p/88466945