惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Apple Machine Learning Research
Apple Machine Learning Research
博客园_首页
G
Google Developers Blog
aimingoo的专栏
aimingoo的专栏
罗磊的独立博客
博客园 - 【当耐特】
M
MIT News - Artificial intelligence
D
Docker
博客园 - 三生石上(FineUI控件)
博客园 - 司徒正美
人人都是产品经理
人人都是产品经理
博客园 - 叶小钗
月光博客
月光博客
S
SegmentFault 最新的问题
Jina AI
Jina AI
Blog — PlanetScale
Blog — PlanetScale
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园 - Franky
L
LangChain Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Microsoft Azure Blog
Microsoft Azure Blog
阮一峰的网络日志
阮一峰的网络日志
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Last Week in AI
Last Week in AI

Example blog

Ghost routing explained with routes.yaml examples — routes, collections & taxonomies Ghost redirects explained with practical redirects.yaml examples How to Serve JSON or XML Data in Ghost How to Change Your Default Post Template in Ghost Ghost Custom Theme Settings How to add Google Fonts to Ghost Themes How to Configure Ghost with Mailgun Ghost Theme Structure & Organization How to Make Custom Templates in Ghost Themes How to Install Ghost CMS via Ghost-CLI How to Add Syntax Highlighting to Ghost The best Ghost CMS hosting platforms Ghost 6.0 — Social Web and Native Ghost Analytics Ghost CMS Social web beta, email 2FA and more author social links How to keep custom design settings when updating your Ghost theme How to use the public preview card in Ghost How to add members-specific sections in Ghost How to customize the default content CTA in Ghost How to build a custom homepage in Ghost An overview of Ghost editor cards and and how they work Ghost CMS News: One-time payments & collecting sales tax How to customize the private site access template in Ghost How to add custom fonts in Ghost themes Ghost CMS News: Additional payment methods & internal linking How to use Code Injection in Ghost How to set meta data of your custom routes & collections in Ghost Ghost CMS News: TK reminders, ActivityPub and improvements How to format dates and use the date helper in Ghost Ghost CMS internationalization, custom fonts & spam protection Understanding and optimizing post and page settings in Ghost CMS
How to Automatically Add Member Labels From Referral Traf...
Bright Themes · 2022-10-02 · via Example blog

Referral traffic is an important metric to watch as it sends potentially valuable visitors to the website from trusted websites. Referral traffic also has SEO benefits. Google and other search engines consider these links and social signals as positive ranking factors as long as they are coming from trusted websites.

With UTM tracking, it's also possible to discern which sites and social profiles are generating the most traffic for your website. To identify subscribers specifically, you can use Ghost member labels.

We will explore how to apply labels based on referring links and UTM parameters, but first, let's see what these are.

UTM Parameters

UTM parameters are a simple, straightforward, and reliable way to track traffic online. They're not affected by changes to third-party cookies and they work with Google Analytics.

An example link with UTM params:

https://yoursite.com/a-post-link?utm_medium=social&utm_source=twitter&utm_campaign=daily-posts

In this case, the UTM parameters are everything that comes after the question mark. There are five different UTM parameters:

  • utm_source - Campaign source (twitter, facebook, etc)
  • utm_medium - Campaign medium (social, paid_social, etc)
  • utm_campaign - Campaign name (free_trial, summer_sale, etc)
  • utm_term - Campaign term (to track keywords)
  • utm_content - content (to differentiate different content)

Generate member labels

Ghost member labels are ideal for segmenting your members, labels can be applied from the member dashboard or from the subscribe form on your site. This means you can define specific labels or add them dynamically based on certain parameters.

First, let's define the URL params we want to track:

const labels = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'ref'];

Next, we have to check if the URL contains any of those params:

const urlParams = new URLSearchParams(window.location.search);
labels.forEach((label) => {
  if (urlParams.has(label)) {
    // label found, we have to add this to the form
  }
});

The final step is generating the corresponding labels on forms, so when a user subscribes, the labels will be visible in your Ghost admin. Here's a function that will do just that:

function addInputLabel(labelValue) {
  const subscribeForms = document.querySelectorAll('.subscribe-form');
  let labelInput = document.createElement('input');
  labelInput.setAttribute('data-members-label', '');
  labelInput.setAttribute('type', 'hidden');
  labelInput.setAttribute('value', labelValue);
  subscribeForms.forEach((form) => {
    form.appendChild(labelInput.cloneNode(true));
  });
}

Let's break down this function to understand what's happening:

  1. First, we are looking for all the subscribe forms on the current page (you might have different CSS classes so you can adjust the .subscribe-form accordingly)
  2. Create a new input element inside the form and apply the relevant attributes. ( data-members-label must be present for this to work, and the labelValue will be passed to the function)
  3. The last step is appending the created input to the subscribe forms on the page.

Here's the code in its entirety:

<script>
  const labels = ['utm_source', 'utm_medium', 'utm_campaign', 'ref'];
  const urlParams = new URLSearchParams(window.location.search);
  labels.forEach(label => {
    if (urlParams.has(label)) {
      addInputLabel(`signup-${label}=${urlParams.get(label)}`);
    }
  });

  function addInputLabel(labelValue) {
    const subscribeForms = document.querySelectorAll('.subscribe-form');
    let labelInput = document.createElement('input');
    labelInput.setAttribute('data-members-label', '');
    labelInput.setAttribute('type', 'hidden');
    labelInput.setAttribute('value', labelValue);
    subscribeForms.forEach(form => {
      form.appendChild(labelInput.cloneNode(true));
    });
  }
</script>

Analyze the results in Ghost Admin

When the previous step is done, and you have new subscribers from referral links or UTM traffic those labels should be visible by opening Members section in Ghost Admin and clicking on your member:

Ghost Member Labels
Ghost Member Labels

You can also filter members based on labels in the Members section. Additionally, you can even send newsletters targeted directly to those members. This can be done by selecting 'Specific people' when publishing your newsletter, then in the 'Selection', you have to choose the label(s) you want to target.