add script types and a simple type guard #27

flashdesignory · 2023-10-05T17:43:34Z

just a starting point... could be exported differently, but at least it works.

with this we can do:

import { GoogleAnalytics, isExternalScript } from "third-party-capital";
import type { Script } from "third-party-capital";

const ga = GoogleAnalytics({ id: "donuts" });
ga.scripts.forEach((script:Script) => {
    console.log("external?", isExternalScript(script));
})

@kara

flashdesignory · 2023-10-05T17:46:03Z

src/index.ts

@@ -15,3 +15,5 @@
 export { GoogleAnalytics } from './third-parties/google-analytics';
 export { GoogleMapsEmbed } from './third-parties/google-maps-embed';
 export { YouTubeEmbed } from './third-parties/youtube-embed';
+
+export * from './types';


just a way to get the types exported...

My TS skills are not as good as I'd like them to be lol

Is this how folks generally export types? Do you know if packages usually includes a types file as well?

there's maybe a more "proper" way, this just made it work for me.
@janicklas-ralph - what did you have in mind?

would be nice maybe to be able to import them from "third-party-capital/types" instead?

Yeah tbh I'm not sure, but we can figure that out in a future PR :)

flashdesignory · 2023-10-09T16:27:44Z

src/third-parties/google-analytics/data.json

@@ -11,7 +11,7 @@
      "action": "append"
    },
    {
-      "code": "window.dataLayer=window.dataLayer||[];window.gtag=function gtag(){window.dataLayer.push(arguments);};gtag('js',new Date());gtag('config','${args.id}')",
+      "code": "window.dataLayer=window.dataLayer||[];window.gtag=function gtag(){window.dataLayer.push(arguments);};gtag('js',new Date());gtag('config','{{id}}')",


using a more traditional template tag

flashdesignory · 2023-10-09T16:28:15Z

src/utils/index.ts

@@ -38,6 +39,12 @@ export function formatUrl(
  return newUrl.toString();
 }

+export function formatCode(code: string, args?: Inputs) {


this function replaces the template tags with args passed in

flashdesignory · 2023-10-09T16:44:54Z

src/third-parties/google-analytics/data.json

@@ -11,7 +11,7 @@
      "action": "append"
    },
    {
-      "code": "window.dataLayer=window.dataLayer||[];window.gtag=function gtag(){window.dataLayer.push(arguments);};gtag('js',new Date());gtag('config','${args.id}')",
+      "code": "window.dataLayer=window.dataLayer||[];window.gtag=function gtag(){window.dataLayer.push(...arguments);};gtag({'gtm.start': Date.now(), 'event': 'gtm.js'});gtag({'config':'{{id}}'})",


this part was a little weird, I don't know what the "config" does, but I kept it in there.

screenshot of ga tags applied to html (without this implementation):

screenshot of the modified code block (looks pretty close):

updated screenshots - reverted to gtag usage:

snippet:

generated:

weird thing is that if we call the gtag function (either snippet or generated), it's basically an array, vs the automatic events fired are objects 🤷 .

I did compare with https://developers.google.com/tag-platform/gtagjs/configure and it looks right.

housseindjirdeh

Just one nit, otherwise this is great ❤️

Thanks for doing this!

housseindjirdeh · 2023-10-10T20:41:12Z

src/third-parties/google-analytics/data.json

@@ -11,8 +11,7 @@
      "action": "append"
    },
    {
-      "code": "window.dataLayer=window.dataLayer||[];window.gtag=function gtag(){window.dataLayer.push(arguments);};gtag('js',new Date());gtag('config','${args.id}')",
-      "strategy": "worker",
+      "code": "window.dataLayer=window.dataLayer||[];window.gtag=function gtag(){window.dataLayer.push(arguments);};gtag('js',new Date());gtag('config','{{id}}')",      "strategy": "worker",


Nit: Identation

I thought I already set up Prettier in this package, but maybe I need to take another look 🤔

🤦‍♂️ - fixed

housseindjirdeh · 2023-10-10T20:42:25Z

src/index.ts

@@ -15,3 +15,5 @@
 export { GoogleAnalytics } from './third-parties/google-analytics';
 export { GoogleMapsEmbed } from './third-parties/google-maps-embed';
 export { YouTubeEmbed } from './third-parties/youtube-embed';
+
+export * from './types';


Yeah tbh I'm not sure, but we can figure that out in a future PR :)

add script types

3024231

flashdesignory requested review from housseindjirdeh and janicklas-ralph October 5, 2023 17:43

flashdesignory commented Oct 5, 2023

View reviewed changes

flashdesignory added 2 commits October 5, 2023 16:26

split up files

4427da4

fix code block

ddb1aef

flashdesignory commented Oct 9, 2023

View reviewed changes

fix code some more

676e5af

flashdesignory commented Oct 9, 2023

View reviewed changes

flashdesignory added 2 commits October 9, 2023 17:34

revert code format

0738f81

undo json code

e43c91c

housseindjirdeh approved these changes Oct 10, 2023

View reviewed changes

indent

0813c45

flashdesignory merged commit 04e7407 into GoogleChromeLabs:main Oct 11, 2023
2 checks passed

flashdesignory deleted the thor-scripts-types branch October 11, 2023 13:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add script types and a simple type guard #27

add script types and a simple type guard #27

flashdesignory commented Oct 5, 2023 •

edited

Loading

flashdesignory Oct 5, 2023

housseindjirdeh Oct 5, 2023

flashdesignory Oct 5, 2023

housseindjirdeh Oct 10, 2023

flashdesignory Oct 9, 2023

flashdesignory Oct 9, 2023

flashdesignory Oct 9, 2023 •

edited

Loading

flashdesignory Oct 9, 2023 •

edited

Loading

flashdesignory Oct 10, 2023

housseindjirdeh left a comment

housseindjirdeh Oct 10, 2023

flashdesignory Oct 10, 2023

housseindjirdeh Oct 10, 2023

add script types and a simple type guard #27

add script types and a simple type guard #27

Conversation

flashdesignory commented Oct 5, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flashdesignory Oct 9, 2023 • edited Loading

Choose a reason for hiding this comment

flashdesignory Oct 9, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

housseindjirdeh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flashdesignory commented Oct 5, 2023 •

edited

Loading

flashdesignory Oct 9, 2023 •

edited

Loading

flashdesignory Oct 9, 2023 •

edited

Loading