Intro

In this post, I shared a solution to add view count to blogger posts with Google Apps Script. However, we need to add some custom code to every single post manually. This is a solution to add the code automatically to the post with Power Automate.

Instructions

1. Build an automated cloud flow.

Name your flow.
Choose the trigger: When a post is created (Blogger).
Create the flow.

2. Trigger configuration.

3. Initialize variables.

blogId: The data is available in the dynamic content of the trigger, however, the returned value is always null when I created this post (could be a bug in the blogger connector for Power Automate).

webAppUrl: This is the API endpoint to handle the post view count, check this post or watch this video to learn more.

htmlViewCount: The html code for the post view to be added to the current post content. You can modify the styles and contents, make sure id=”views” is set for the element of post view count.

<p style="text-align: left;"><span><span style="color: #666666; font-family: Play;">Post Views:&nbsp;<span id="views">123</span></span></span></p>

scriptViewCount: The javascript code to handle the post views.

<script>

  /** START of configurations */

  /** 1. Your Apps Script API (WebApp URL) */

  const api =

    "@{variables('webAppUrl')}";

  /** 2. Can be found in the draft url */

  const blogId = "@{variables('blogId')}";

  /** 3. Can be found in the draft url */

  const postId = "@{triggerOutputs()?['body/id']}";

  /** 4.

   * minutes for caching browser fingerprint

   * set to 0 to disable the fingerprint check

   * max value is 360 mins

   */

  const mins = 0;

  /** 5. Where the post views is rendered */

  const idOfPostViews = "views";

  /** END of configurations */

  const animate = viewAnimation();

  fetchPostViews(blogId, postId);

  function createBrowserFingerprint() {

    const width = screen.width || "";

    const height = screen.height || "";

    const languages = navigator.languages;

    const agent = navigator.userAgent;

    const plugins = [];

    for (let p of navigator.plugins) {

      plugins.push(p.name);

    }

    plugins.sort();

    return [width, height, ...languages, agent, ...plugins]

      .join("")

      .replace(/[^a-z0-9]/gi, "")

      .slice(0, 250);

  }

  function viewAnimation(start = 0) {

    return function () {

      const animation = [".", "..", "..."];

      const value = animation[start];

      start++;

      if (animation.length == start) start = 0;

      return value;

    };

  }

  function updatePostViews(id = idOfPostViews, views = animate()) {

    document.getElementById(id).innerText = views;

  }

  function createQueryString(params) {

    return Object.entries(params)

      .filter(([_, value]) => value)

      .map(([key, value]) => `${key}=${value}`)

      .join("&");

  }

  async function fetchPostViews(blogId, postId) {

    const fingerprint =

      mins > 0 && mins <= 360 ? createBrowserFingerprint() : "";

    const interval = setInterval(updatePostViews, 500);

    const queryString = createQueryString({

      postId,

      blogId,

      mins,

      fingerprint,

    });

    const url = `${api}?${queryString}`;

    try {

      const response = await fetch(url);

      const data = await response.json();

      updatePostViews(idOfPostViews, data.views);

    } catch (err) {

      updatePostViews(idOfPostViews, err.message);

    } finally {

      clearInterval(interval);

    }

  }

</script>